はてなブログをマテリアルデザイン風にカスタマイズしました。デザインのノウハウからCSSの編集迄詳しく解説!!
こんにちはnasustです。このブログをGoogleのマテリアルデザイン風にカスタマイズしました。
今回の記事では、何故マテリアルデザインを採用したのか、デザインのポイント、そして実現する為のCSSの編集内容を詳しく解説します。
ちなみに、メインプログラマーでUIのデザインは、それなりにできる程度の経験です。
マテリアルデザインの採用
マテリアルデザインを採用したのは、Googleのマテリアルデザインの資料を見て衝動的にやってみてええ!! となった訳ですが、もちろんそれなりに考えがあります。
Windows8の頃からフラットデザインが流行っていましたが、ハッキリ言ってその頃のWEBサイトは操作し難いですね。何故かというと、全てフラットなので重要なボタンやリンクなど、全て等価に見えて目立たない為に、操作の仕方が分からないですよ。それから暫くしてAppleのMacもフラットデザインを採用しましたが、操作しやすいように微妙にグラデーションや影を付けるようにしました。そのお陰でフラットデザインでも普通にUIを操作することができます。
そして、Googleのマテリアルデザインとはフラットデザインを発展させたようなものです。Googleが提唱したフラットデザインのガイドラインです。簡単に説明するとUIの各パーツの重なりを物理的にとらえ、影やアニメーションなどでZ軸、つまり奥行きを考えたデザインです。
例えば、UIの要素を実際の紙で作ると仮定します。それぞれ重なってUIが出来上がると思います。その重なりを考えて、UI表示の表現する訳です。
このページに細かいガイドラインが書いてあります。 まあ、はてなブログを実際にカスタマイズした際は、ざっくりとガイドラインに沿っているかなと、あまり重みを掛けて行っていないです。世の中にマテリアルデザインのCSSフレームワークが配布されていますが、本当にガイドラインを守っているようには見えないです。みんな、なんちゃってマテリアルデザインで作っているみたいですね。
しかし、物理的な重なりを考えてUIを作ると操作しやすいので採用のメリットはあります。
はてなブログのデザインの方針
実際、はてなブログをデザインする時にどんなものにするか決めました。
- 明るくて雰囲気がいいもの
- プログラマなので、ちょっとだけクリエイティブっぽい雰囲気
- 真面目っぽいけど、お遊び、まったりな空間を感じられるような
とざっくりブログの雰囲気を決めて、メインカラーを決定します。 なぜ、メインカラーを決定するのかというと、人間は色から感情を感じ取れる力があるからです。 そして決定したのは、水色です。水色はそのまま水の色ですね。この色から爽やかさや清潔などの印象を受けます。また、この色に含まれる青などは冷静さ賢そうなどの印象を受けます。また薄い色だとグレーに近く、グレーは中立、つまりそこから色を染めることができるという発想でクリエイティブな印象があります。
そして色の組み合わせを決定します。メインカラーやサブ、アクセントと3色から5色を選びます。余りに多色になると、余程上手く作らないとド派手で下品になってしまいます。
プロでもなくても色を上手く選択できるウェブサービスがあります。
https://color.adobe.com/ja/create/color-wheel/
このサイトでメインカラーを選んで、操作すると相性の良い色の組み合わせが表示されます。 そのカラーを選んで、はてなブログのデザインすることで、それなりの品質ものが出来ます。
そして、デザインは使いやすさを優先です。カッコ良くして逆に使いにくくなる場合があります。 デザインするときはカッコ良く、アーティスト性を感じられるようなもの作りたくなりますが、 今回はそんなものを気にしない、使いやすい、見やすいで作ります。それでOKです。
素人ががんばって、なんちゃってクールみたいなの作ったって、どこか破綻します。 そんな労力を掛ける意味ないです。カッコ良いの作ったて、美人と同じで3日で飽きます。
髪切って髭剃って、綺麗な服を着ていれば容姿が多少悪くても、嫌われません。僕は全然だめですけど。 それと一緒で普通の見やすいレイアウトをしていけば良いです。その中で自然と個性など生まれてきます。
ブログのカラム数を決める。
2カラムに決めました。
ブログは基本的には3カラム、2カラム、1カラムというレイアウトがあります。
3カラムは、記事のを中心に左右にメニューや情報があるレイアウトです。コンテンツが多く、各コンテンツを参照して欲しい型のブログに最適です。マガジンなど情報過多なブログで多いです。
2カラムは、個人で多いです。コンテンツもそこそこな程度で選びやすい。サイドメニューが左か右かでパターンがあります。人は左から見る癖があるので、メニューを重視するか記事を重視するかでパターンを選びます。
1カラムは記事重視です。メニューなどは記事の下にある場合が多いです。記事しか見えない為、印象が強くなります。写真ブログなどで多く見ます。
普通のブログで良いので2カラム、そして第一に記事を読んで欲しいので、記事、サイドメニューの並びにします。
はてなブログのデザインの構成の方針
はてなブログのデザインの要素は大雑把に以下のように分けられます。
- ヘッダ
- 記事部分
- サイドバー
- プロフィール
- カテゴリ
- アーカイブ
ヘッダを除く要素をカードUIとしました。カードUIとはカードの四角いUIにコンテンツを表示させ、カードである為に、それぞれ境界がハッキリとなり見やすくなったり、選びやすくなります。
マテリアルデザインとして、このカードは地面の上に並んでいると考えてレイアウトします。
はてなブログのカスタマイズを行う
まずは、はてなブログでカスタマイズする元となる公式テンプレートを選びます。何故公式かというと、記事の中のCSSスタイルなどはてなブログの標準に準拠している為に、カスタマイズしやすいです。
カスタマイズの為には、テンプレートがどのように構成されているかHTMLの構造を把握する必要 あります。
上記の画像はテンプレートの各要素の構成を見やすくしたものです。IDやクラス名を標準することで把握しやすくしています。それぞれのIDやクラスのスタイルを上書きすることでカスタマイズが行えます。
ちなみにカスタマイズの表示の確認はGoogle Chormeだけでいい思いますよ。はてな民は訓練されているのでIEとか余り使わない見たいですし。自分のブログなので、なるべく簡単に作りましょう。
各ブログ要素の大きさについて
記事とサイドメニューの横幅の比率については、黄金比で大雑把に決めました。黄金比は理由は分からないですが、大きさの比較で美しい比率があるようです。ブログ全体の幅を1024pxとして、記事を760pxにしました。黄金比の数値とちょっと違うんですが、これぐらい幅が文章が読みやすい印象があります。
各ブログのカードUIの影について
各カードUIは、地面の上に置いてあるという考えです。だからほんのチョットの厚みのカードを実際に置いた場合の影は、ほんのチョッピリ出来るという考えてです。
カードUI
box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.12);
このように少しだけ影が表示するようにしました。このパラメータは記事の要素で、サイドメニューの各要素の影は、これより少しだけ弱くしています。記事の方をほんの少し目立たせる為です。
デザインで影の色は余り強くしないほうが良いです。強い影というのは強烈な光を当てて目立たせると考えられるので、過剰な表現となり全体と釣り合わなくなり下品に見えます。
強い影は、ボタンなどで使うべきです。
ブログのリンクをボタンとして表示する
テンプレートのリンクは、テキストリンクとなっていて下線のみの修飾です。ブログの操作でアクセスして欲しい重要なリンクは目立たせる為にボタンなどと大きく表示させるべきです。
また、タブレットなどのタッチディスプレイが増えてきているので、タッチしやすい大きさにすべきです。
ボタン
.leave-comment-title{ background-color: #7ABCFF; color:#FFFFFF; font-size: 14px; font-weight: bold; text-decoration: none; padding: 15px; box-shadow: 1px 2px 4px 0px rgba(0,0,0,0.3); }
リンクを大きめの表示のボタンにして押しやすくします。 ボタンは押せるという概念により、どのUIよりも高いと考えられますので、影を少しだけ強めにします。
どのリンクをボタンにすべきかは、ブログの操作で重要なリンクや目立たせたいコンテンツのリンクなどにします。
ブログのレイアウトと余白について
ブログのプロフィールを例にレイアウトと余白について解説します。
はてなのアカウントのアイコン、名前、自己紹介、それぞれ余白があります。これは余白で目立たせる為です。
別の要素と余白大きいと孤立して、その要素に視線が集中する為に目立つようにあります。
アイコンと名前を中央揃えにすることで中心となり見栄え良くなります。
他のブログのUIの要素それぞれ、余白を上手く使うことにより、目立たせたり、まとめたり、スッキリとした見栄えになります。
まとめ
- ブログの雰囲気に合わせてメインカラーを決定する。
- Adobe Color CCを使用してブログで使用する色のパターンを決定する。
- マテリアルデザインに準拠して物理的なレイアウトにする。
- 高さを影で表現する。
- 重要なリンクはボタンなどにして押しやすくする。
- 余白で、各要素を目立たせたり、まとめたりする。
マテリアルデザインの採用でフラットで余計な装飾は無しにスッキリとしたデザインで、物理的な高さを表現することによってコンテンツの境界が分かりやすくなり、ボタンなど押しやすいブログのデザインが出来た気がします。
まだまだ作り込み出来そうですが、これで一旦落ち着かせます。 まだデザインだけのカスタマイズで、テンプレート自体は標準のままです。 他のブロガーで解説しているテンプレート自体改造を改造するカスタマイズもその内にやりたいですね。
関連記事
