• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2013/07/04

サイトをフラットデザインにリニューアルするに当たって考えたこととか気をつけたこと

リニューアル
先日、フラットな感じにリニューアルしました当サイト。
一応デザイナーの端くれとしていろいろなことを考えながらデザインしました。篠崎愛ちゃんのこととか考えながらコーディングしました。

そんなわけで今回のリニューアルに際して考えたこととか記しておこうと思います。


フラットデザイン採用の理由

さて、現在のトレンドとしてもはや説明不要のフラットデザイン。WindowsOSが取り入れたことや、今秋リリースのiOS7での採用が発表されるなど、その勢いはとどまることを知りません。
右も左も、老いも若きもフラットデザイン。
私自身の顔も、のっぺりとしたフラットデザインを採用しております。最先端です。本当にありがとうございます。

当然のことながら、リニューアルにあたり私もフラットデザインを意識しました。そして実際に取り入れたのですが、決してはじめからフラットにしてやろうとデザインした訳ではありません。
フラットデザインありきでリニューアルに取り掛かったのではない、と言うことです。

ただ、トレンドだからフラットデザインにしましょう、OSで採用されているからこれからはフラットデザインだ、という、Webサイトとして本来考えるべきビジネス要件などを無視してフラットデザインを提案したり、結果的にユーザを逃がすようなデザインを乱造するのはやめましょう、ということです。
フラットデザインは、あくまで選択肢。大事なのは、ビジネス要件、コンテンツ、設計とのバランスです。それと折り合うならば、フラットデザインもOK。でも、コンテンツや設計に支障を来すのであれば、安易なフラットデザインへの迎合はやめましょう、というわけです。

via: 最近のWebデザイン界隈におけるフラットデザインブームってなんか間違ってませんか? | sogitani.baigie.blog

↑大賛成です。

ごちゃごちゃしとった

リニューアル前
↑が前回のデザイン。ヘッダー周りのリボンやロゴ下の手帳っぽい処理など、スキューモーフィックな感じを目指してます。
リニューアル直後は非常に気に入っていたのですが、末期は「なんか見づらい」と思うことが多くなっておりました。

私のサイトの特性上

  • 写真が多い
  • 文章が五月蝿い

と言った点が問題で、装飾(真ん中で出張ってるシェアボタン含め)に気を取られて文章に集中できないという結果を招いていると解析しました。
どうせ頑張って書いたのならば小ネタも拾って欲しいわけですが、いつだってツッコミを入れてくれるのは御大くらいなもの。

そんなわけで、「より読みやすいブログにするためにはどうすれば良いか?」→「装飾を削ろう」→「フラットデザインだ!」と言う流れが出来たのはごくごく自然なことと言えます。
ふらっと思いついたわけでは無いのです。うわぁ。

 

hover時
フラットデザインにしたせいで各アイコンやボタンの意味が分からない!などと言う本末転倒が起きないように気もくばりました。

 

hover時
マウスオーバー時の動きは割と気に入ってます。

「日本語にフラットデザインは合わない」など賛否両論あるでしょうが(確かに英語の方が相性いいよなぁ)、「読みやすくなった」と言うお声もけっこう頂き、ほっと一安心しているところです。

余白を統一

余白の統一
あと気をつかったのは、各要素のpaddingを統一させると言う点。


 

揃ってない
デザインをするならば基本の「き」なのですが、前回のテーマはほとんど初めてのWebデザインと言うこともありその点にほとんど気が配れていません。
おかげさまで統一性がなくなんだか気持ちの悪い見た目になっておりました。

今回はワイヤーフレームを作る段階からきっちりと計算して、コンテンツの隙間も揃えて上記のような違和感を排除。
嗚呼ようやくこれで半人前。

Sassを覚えたのでこの辺の調整がしごく楽だったのも今回の収穫でした。


そんなわけで、今回のリニューアルに際して気を配ったことや考えたことでございました。とりとめも無く書き記してみましたのでまとまっていないですがまぁよいでしょう。
何はともあれ、デザインは正解が一つと限らないところが面白いなぁなんてことを最近ぼんやり考えております。

こんな記事もオススメです

OZPAの表4をフラットな感じにリニューアルいたしました:)

PC版に続きOZPAの表4のスマートフォン用テーマも作成いたしました

[Web]Sass(Scss)+ Compassのテンプレートファイルを作成したので晒してみる

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×