様々な想いを込めて。わたしが思う・考えるStiger3のデザイン  #Stinger-WP

カテゴリー:WordPress    |    タグ:

様々な想いを込めて。わたしが思う・考えるStiger3のデザイン  #Stinger-WP

皆さん!遂に2013年のAdvent Calendarが始まりました!
この記事は#Stinger Advent Calendar 2013! 1日目の記事です。

#Stinger Advent Calendar 2013ってなに??

技術系コミュニティから火がついた、「あるテーマにそって12/1から12/25まで1日に1つずつブログ記事を公開する」というものです。

これから毎日、クリスマスまでの25日間をStingerについていろいろな方がブログでその想いを語ります。

詳しくはこちら

そして、今ご覧頂いている記事から始まるStinger Advent Calendar 2013
これから25日まで、いろいろな方がStingerについての想いを語ります。

本日、第1日目担当であるわたしがお伝えするのは、Stingerのデザインについてです。

わたしが思う・考えるStiger3のデザイン

ものを作るときには、そこには意味(理由)があります。
デザインもそのひとつで、どれも意味をもって構成されています。

では、Stingerのデザインは、どのような意味を持って構成されているのか。


Stingerのデフォルトデザイン

ここでは大きく3つの要素デザインについて考察してみました。
※ あくまでもわたし自身が思っていることです。

1. 背景色とコンテンツの色

Stingerのデフォルトの背景色はグレーですが、メインコンテンツ(記事)のところは白色となっています。

どうしてこの配色なのか?
これは、ブログの背景を灰色に設定、メインコンテンツ(記事)のところは白色にすることによって、読者はコンテンツに集中して読めるということなどからこの配色となったのだろうと思います。

StingerAD2

こうしてみてみると、メインのところがぐっと際立っているのがわかります。

参考:3日間で検索順位が200位上昇したSEO対策10項目
http://w-just.com/blog/seo-10technique-1041.html

2. リンク色

リンク色としての青の認知度が高いから。
認知度が高いというのはとても重要なことだと思います。初めて訪れたサイトでもリンクだろうと予測できるということですからね。

予測できるということは、次へのアクションを起こして貰いやすい!

StingerAD3
参考:テキストリンク色の変更で、70億円(!)を稼ぎだすことに成功したマイクロソフト
http://www.fallinstar.org/2010/03/70.html

3. メインコンテンツなどの各要素サイズ

Stingerでは メインコンテンツを550px / サイド336px で構成されています。

サイドのサイズについては、Adsenseの関係かと思っているのですが、メインコンテンツのサイズについては、これはとても主観的な意見ですが、ブログという視点で言うならば、メインコンテンツは500px~650pxぐらいまでが、集中して読めるコンテンツの幅だからだと思っています。

最近は大きくサイズをとっているブログをよく見かけることがあります。
これは、ディスプレイサイズが大きくなったことと関係しているのだと思いますが、集中するための人の目線の振り幅はそこまで大きくないとわたし自身は感じています。

そして、ここ

padding

padding: 39px;が取られているのですが、隙間をなくしてしまうときゅうくつな感じがしてしまうのをここで解消しています。

可読性を上げる為だと思っているのですが、このサイズが絶妙!
このブログをカスタマイズするときにここの数字をいろいろ変更してみたのですが、なかなかこの数字以外でしっくりくるものがなかったくらい!
余白デザイン!

こんな感じで、以上さっくりと主観的ですがStingerのデザインについて考察してみました。
本当にこれらの理由なのかどうかはわかりませんが。。
ただ、そんなに的を大きく外してはいないだろうなぁという謎(根拠のない)の自信は。。ありますw

なので、ものすごくカスタマイズされたように見える?このブログですが、変更した箇所というのは本当に少しだけです。
カスタマイズ所要時間2時間(ロゴ作ったりなど画像作成時間)。。。


必要なものは揃っている。

StingerAD1

実際にしているわたしのデザインカスタマイズ

とは言え、わたしブログにするために少しだけ変更した箇所があります。
以下に変更したところのCSSなどを。


フォントの指定

ブログで表示させるフォントの指定を次の様にしています。

ただし、これはPC版のみで、samrt.cssの方では指定を外しています。
これは本当に好みの問題ですが、わたし自身タブレットなどはデフォルトのフォントの方が好きなのでこうした指定をしています。


テーマカラー

このブログを始めるとき、テーマカラーを何にしようかと悩んでいたのですが、最終的にピンクにしました。そのきっかけは

color

タイトルにマウスを乗せた時のリンクカラーを元に色を派生させてこのブログの配色を決めました。


h2デザインの変更

これは少し前に記事として書きましたので、こちらを見てもらえればと思います。

さいごに

いかがでしたか?Stiger3のデザインの魅力をしっかりお伝えできたでしょうか。
これからStinger3のデザインを変えようと思っている方にとって少しでも参考になれば幸いです。

すこし端折って書いているところもあり、本当はもう少し詳しく熱く語りたいところですが、1発目からとんでもなく長くなるのはどうなのよ。。という思いからこれくらいにしておこうと思いますw

というのも、本日第1日目は2人登場します。

Stinger Advent Calendar 2013第1日目午後から、
Daisuke_9taroさんによるStingerへの想い「それでもSTINGERをデザインを変えたい場合」が語られます。

楽しみですね!!

ADVERTISEMENT

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

published:2013/12/01    Written by:
カテゴリー:WordPress,      タグ:

最後まで読んでくれた方へ。

閲覧頂きありがとうございました!
お気に召しましたら是非RSS登録やフォローをお願いします!

Twitter

関連記事

Stinger-minimum

Stinger3子テーマ「Stinger-minimum」のスマホテーマ対応をしました!

今回このスマホ用「Stinger-minimum」を作りました。 子テーマ「Stinger-min

記事を読む

Wordpress1

コメント欄をカスタマイズしたので備忘録メモ(コメントとトラックバックを分ける)

現在このブログでのコメント欄はJetPackのコメントを使用しています。 これです! が、こ

記事を読む

Stinger-minimum

子テーマ"Stinger-minimum"を新しくなった「STINGER5」用に作りなおしました。

最近新しくリリースされた「STINGER5」html5でレスポンシブにされており内容も充実して更にパ

記事を読む

neko

過去のあの日あの時書いた記事を表示させるプラグイン「Remember Old Post Widget」

なんだか面白いなと思ったので導入してみたかったのですが、圧倒的な記事の少なさ。 なので、いつかこの

記事を読む

image

少しの手間をかけて抜粋部分を表示する。だってそれは読んでほしいから!

この抜粋部分に意図しないものが入ってしまい読んでほしいブログが残念な感じにならないように。 抜粋は

記事を読む

コメントを残す

5件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

生まれ落ちた地は神戸。
鉄成分入ってるものに興味あり!
キイロイトリが好き!
感動すると「ほぅ」と言いますw

  • 2016年8月
    « 12月    
    1234567
    891011121314
    15161718192021
    22232425262728
    293031  
電子書籍ストア BookLive!
PAGE TOP ↑