AI-SEKA | I am Here.

あいせか-愛は世界を動かす- TOP  >  PC関係  >  PC_WEBデザイン >  【簡単にセンス良く見せる】ブログのUIデザイン法

【簡単にセンス良く見せる】ブログのUIデザイン法

個別記事の管理
ブログUIのデザイン法をまとめてみた記事の表紙
FC2のブログを見栄え良くオシャレにするための方法.
他人のブログとデザインで差をつけてアクセスUP!
すぐ使えるブログパーツや参考サイトとかブログを軽くする方法.
についての記事です.



このエントリーをはてなブックマークに追加







偽物語 忍野忍 (1/8スケール PVC塗装済み完成品)偽物語 忍野忍 (1/8スケール PVC塗装済み完成品)


壽屋 2014-04-30
売り上げランキング : 21

Amazonで詳しく見る






ありがたいことに
このブログのレイアウトについて興味を持っていただいたようで
「どうやってデザインしてるの?教えてよ」
とコメントをいただきました.

ということで
筆者がいつもブログやホームページをデザインするときに考えていることやノウハウ、
オシャレなおすすめブログパーツ、
カラーリングやレイアウトを考えるときに便利な参考サイト、
ブログを軽くするためのポイント、
について紹介します.

そのまえに、ひとつ๑´•ω•)
下の画像は筆者がブログやり始めた当初のレイアウトです.
くそ重いです. (gtmetrix の評価F)
ブログのデザインを求めすぎて重たくなってはダメ



デザインを求めすぎてGIFアニメーションを多用したり、
javascriptを入れすぎたりして迷走すると大変なことになります(笑)
しかし超軽くしたところでアクセスが増えるということではないので、軽さとデザインを両立できるブログを目指します.



ノウハウについて

センスのいいレイアウトをデザインするとき一番楽なのは、他人のサイトから盗むことです.
日頃ブックマークしているサイトを違う目線で見る.
「ここのサイト見やすい」「オシャレ」を感じた瞬間にブックマーク.
そうして、見やすい理由、オシャレなポイントをチェックします.

ChromeやFirefoxの要素を見る機能を使ってサイトのソースを確認することで
そのサイトのオシャレ要素を盗みます.
要素を見る機能を使ってサイトのソースを盗む



理想論ですが、
見やすくてオシャレなブログをたくさん蓄えて、それぞれのいいところをピックアップし、複合すれば最強のブログのデザインが完成します. w

ちなみに筆者がいつもデザインを盗んでいるところはここ.
WordPress Themes Website Templates Create a Website ThemeForest

最新のテンプレートが更新されまくっています.
インスピレーション刺激されまくりかも.



レイアウト

レイアウトについては、個人の好みでイイと思いますが、理にかなった配置をしたいです.
3カラムとか配置の工夫

そこでおすすめなサイトのご紹介.
ここのサイト様の記事を参考にしていただければOKかなーとww
かなり説得力があります!
< アメブロのレイアウトは、2カラムか?3カラムか?[目的別デザイン選択法]|短期集中・クリエイティブスクール校長ブログ >
レイアウト参考サイトの紹介です. 分かりやすい!



筆者的には
アフィリエイト・広告等がある程度設置されていないとサイトに箔が付かない気がします(笑)

筆者が考える誰でも簡単に作れて、見やすくオシャレになるレイアウト
< ページ作成中です >



記事を書くときのレイアウト

記事の書き方も考えなければなりません.
筆者のスタイルは、

文章テキスト…
画像
1
2
3行 改行
文章テキスト…
画像
 ⋮


みたいな感じで記事を書くように心がけています.(2013年11月現在)
文章の合間に画像をたくさん入れることによって記事の質が上がるような気がします.



カラーリングについて

色の組み合わせでサイトの印象は変わります.
そこでおすすめの参考サイトはこちら.

ノンデザイナーこそ押さえておきたい!グッとくるWebサイト配色パターン集 Find Job ! Startup
カラーレイアウトについての参考サイトはこちら
このサイトはカラーコードを分かりやすく載せていて参考になります.
ChromeやFirefoxの要素を見る機能を使って
コピー&ペーストで自分のサイトをペインティングしてみてはどうでしょうか^^
カラーリングの比率の基本は 7:2:1 だそうです. なるほどー



おすすめブログパーツ

Banner Rotator(バナーローテーター)!(☝ ՞ਊ ՞)☝
これさえ導入しておけば、とりあえずオシャレになる.(笑)
バナーローテーター導入してみた



簡単にいうとスライドショーですね.
ブログタイトルやTOP絵の代わりにしてもいいですし、
3カラムとの相性も抜群にいいです!

導入しているサイトの例.
Skywalker - Welcome to our Company!
バナーローテータがかっこいいサイトの紹介



導入方法は、このサイト様の記事でいいかな?w
いろいろあるスライドショープラグインの中で比較的簡単に導入できるものだと思います.
文字が遅れるパララックス効果!jQuery スライドショー The Next Blog™ ネクスト株式会社
パララックス効果のjQuery スライドショーのやり方をまとめているサイトの紹介



簡単に導入できて 簡単にブログをオシャレにできます><
こういったカッコイイブログのプラグイン・パーツを主役として考え、
そのパーツを引き立たせるようにレイアウトを構成するのもアリだと思います.

バナーローテーターの簡単な導入方法(FC2)
ページ作成中です



サイトを軽くするためには

とにかく画像を軽くすることです!
サイトが重たくなる主な原因は画像です.

そこで活躍するのが、FC2ブログの変数.
<%topentry_image_w300>が熱い!!
FC2ブログを軽くする方法は



FC2が用意している変数を使えばかなり軽くなります.

参考サイト
FC2ブログ独自変数一覧と解説
FC2ヘルプ FC2ブログ テンプレート用 変数一覧

今回おすすめするのが、
<%topentry_image_w300> という変数です.
それぞれの記事の最初の画像をwidth 300pxに圧縮した画像を表示してくれます.
軽いです. きてる.

どんなものか、とりあえず<!--topentry--> ~ <!--/topentry-->の間に適当にコピペしてみてくださいw
すごさが分かるはずです.



最近の流行、レスポンシブ

ここまでくると、もはやFC2ブログでやる領域を超えているような気もしますが、紹介します!w
レスポンシブとは、
サイトを閲覧するときアクセスした人のデバイスの解像度によって可変的にレイアウトが切り替わるデザインのことです.

参考サイトの動画を撮ってみました.
Shopenというサイトです. オシャレ.



解像度が768px以上のデバイスで見たときのCSS
@media only screen and (min-width: 768px) {
#example{}
#example2{}
 ⋮
}

とCSSを設定してあげると、ブラウザの解像度がwidth:768px以下になったときに、
CSSが適用されなくなります.

そうすることで、低解像度のデバイスで閲覧した際に、
widthが100%という状態にすることが出来、
サイドバー等が横に伸びます.
すなわち、デバイスの解像度に応じてCSSを指定できます.便利.

参考サイト
CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

また、
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />

を指定してあげることで、倍率を一定に保って、スマホでの閲覧を一定にすることもできます.

参考サイト
HTML5/ページ全般/meta要素 表示領域を設定する - TAG index Webサイト

FC2はスマホ用のテンプレートが既に使用されていますね.
レスポンシブ
FC2で使用したらセンスいいと思います!^^



さいごに

オシャレなサイトを作るためにはやはり経験が重要だと思います.
最初はめちゃくちゃにHTMLやCSSをいじってみることですね.

筆者も、いままでのレイアウトをぐちゃぐちゃにいじくりまわした経験を元に
今年度中に このサイトのレイアウトをガッツリ変えようかなと計画中ですw



グリッドスタイルのレイアウトやってみました.
合わせてドウゾー^^
グリッドデザインのブログを4ヶ月間やってみた結果の画像





化物語 忍野忍 (1/8スケール PVC塗装済み完成品)化物語 忍野忍 (1/8スケール PVC塗装済み完成品)


グッドスマイルカンパニー
売り上げランキング : 10406

Amazonで詳しく見る








-備考-
GTmetrix | Website Speed and Performance Optimization,
< http://gtmetrix.com/ >

WordPress Themes Website Templates Create a Website ThemeForest,
< http://themeforest.net/ >

アメブロのレイアウトは、2カラムか?3カラムか?[目的別デザイン選択法]|短期集中・クリエイティブスクール校長ブログ,
< http://ameblo.jp/webdesign123/entry-11462003742.html >

ノンデザイナーこそ押さえておきたい!グッとくるWebサイト配色パターン集 | Find Job ! Startup,
< http://www.find-job.net/startup/color-scheme-for-non-designer >

Skywalker - Welcome to our Company!,
< http://skywalker.pcadviser.ro/ >

文字が遅れるパララックス効果!jQuery スライドショー | The Next Blog™ | ネクスト株式会社,
< http://www.nextsoft.jp/articles/2013/jquery-destaque-plugin.html >

FC2ブログ独自変数一覧と解説,
< http://fc2blogshop.blog13.fc2.com/blog-entry-230.html >

FC2ヘルプ | FC2ブログ | テンプレート用 変数一覧,
< http://help.fc2.com/blog/manual/Home/template/templatevariable.html >

Shopen,
< http://designingmedia.com/wordpress/shopen/ >

CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き,
< http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/ >

HTML5/ページ全般/meta要素 表示領域を設定する - TAG index Webサイト,
< http://www.tagindex.com/html5/page/meta_viewport.html >

関連記事





このエントリーをはてなブックマークに追加
TB( 0 ) | CM( 1 )
2013/11/25

カテゴリ:「PC関係」のおすすめ記事

管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2016/01/17 18:31 ] [ 編集 ]
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL
http://nico176.blog.fc2.com/tb.php/100-09de04c0

スポンサードリンク

Nintendo Switch Joy-Con (L) / (R) グレー

カテゴリ

アクセスランキング

[ジャンルランキング]
オンラインゲーム
40位
アクセスランキングを見る>>

[サブジャンルランキング]
その他
22位
アクセスランキングを見る>>

リンク・ブロ友 一覧

相互リンク募集中
ブロ友申請もこちらから
リンク ページ^^friends

GameOn 推し

GameOnはアタリが多い↑↑
現在プレイしているもの.

Alliance of Valiant Arms

今週の人気ページ