フラットデザインな配色やレイアウトを参考にする時におすすめのページ。CategoryやColorShemeでの分類が便利

公開日: : 最終更新日:2016/03/30 programing

スクリーンショット 2013-12-29 9.38.56

最近ようやく、WordPressで自分が採用しているテーマStingerのデフォルト状態から、デザインを変更してみたハマコー(@hamako9999)です。

CSSど初心者には、TOPとかのレイアウト変更にこれでも苦労したんですよ・・・

デザインをいじるにあたって、「どうせなら、今流行りのビッグウェイーブにのってみよう」ということで、フラットデザイン的なのを作るのに参考になるサイトを、をいろいろググってみました。

ググった過程で、やたらはてブついてるけど、あんまり参考にならなかったサイトや、逆に、はてブ全然ついてないけど、物凄い参考になったサイトがあったので、ご紹介いたします。

最後でおすすめしているサイトは、デザイン理論とか全然知らない自分には、直感的ですっごい役に立ちました。

スポンサーリンク

 

あんまり参考にならなかったサイト

Flat UI Colors

フラットデザイン参考にする過程で、はてブつきまくってるので、初期にこのサイト見てみました。気になった色をクリックすると、その箇所のカラーコードをクリップボードにコピーしてくれるという親切設計であります。

で、実際に画面に使ってみた第一印象は「濃い・・・なぁ」という事。サイトのイメージによるので、構築サイトのイメージによってはもちろん当てはまる場合もあると思うんですが、全般的に濃いので、範囲が広い部分で、グレースケール以外をつかうと、存在感が強すぎました。

もうちょっと薄くしてみようと思ったりもしたけど、このページはコレ以外特にカラースケールが用意されているわけではないので、発展性も無し。

(゜-゜) ウ~ン、これだけじゃなんとも。

 

結構参考になったサイト

Flat UI – Free User Interface Kit

入力フォームとかメニューバーとかのデザインが紹介されてます。こっちは、メニューバーのイメージとか考えるときに参考になりました。それ以外も入力フォームや各種スイッチなんかも、いろいろ紹介されているので使いやすいと思います。

カラースキーマ設定できたら、最高に便利なのになぁ。惜しい。

 

最高に便利なサイト

Flat Design Gallery & Showcase | An inspirational resource for designers.


はてブ殆どついてないけど、こいつは(・∀・)イイ!! フラットデザインの要素を紹介するというよりは、フラットデザインされているサイトを色んな分類で検索できるサイト。

分類フィルタが使いやすい

スクリーンショット 2013-12-29 8.56.14

見ての通り、サイト上段で以下の分類でフラットデザインなサイトを検索できますと。これが素晴らしい!!

  • CATEGORY
  • STYLE
  • TYPEFACE
  • COLOR SCHEME
  • SWATCHES

デザイン変更前の、自分のブログデザインの勝手なイメージはこんなところ。

  • イマドキな感じにしたい→フラットデザインにしてみよう
  • 淡い色でデザイン系ブログのイメージにするのは避けたい
  • そもそもデザインの話、全く出てこないし
  • たまにはシモネタも書くかもしれない
  • 個性だしたいから、フラットデザインであまり見ないオレンジを使いたい

ココらへんのイメージを最初に固めておいて、上のサイトからColor ShemeをOrangeで検索。

 

スクリーンショット 2013-12-29 9.06.24

ずらりと並んだサイトから、自分のイメージに近いサイトを選びましょう。ほいさっさ。

カラーコードの取得がやりやすい

素敵と思ったサイトがあったら、おもむろにサイト右下にでている代表カラーのボックスにマウスオーバーすると、なんと!!その、 カラーコードがピロっと表示される。

スクリーンショット 2013-12-29 9.14.56

かゆいところに手が届くこのUI。おっちゃん感動するわ。こういうのが、今流行りのUXってやつなんでしょうか。

サイトの全体イメージとして自分が「こんな感じにしたいなぁ」という直感からサイトを探し、具体的にカラーコードを取得するまでの流れが凄いシームレスになので、はかどるはかどる。

 

素人にこそオススメ

自分、デザイン畑に完全に縁遠い人間なので、色相とか彩度とか、タイポとか全くよく知らないんです。でも、とりあえずこんな感じにしたいなぁというサイトイメージは有りましたと。

そんな人が、手っ取り早くサイト全体のイメージから、カラーコードを取得するには凄い使いやすいサイトなので、使ってみるとよろしいんじゃないでしょうか。

それでは、今日はこのへんで。ハマコー(@hamako9999)でした。

PC-記事下-サブ(Amazon)


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

ブログ主について

ハマコー(@hamako9999
hamako9999
ブログとtwitterはAndroid成分多め。WordPressやガジェット少々。たまに子育てやランニングが混ざります。お問い合わせはhamako9999.netについてよりお願いします。

関連記事

Linux初心者から抜け出すための最適本「シェルプログラミング実用テクニック」

しばらく、LinuxやらMacのターミナル触ってると、こんなことを感じる人も多いのでは。 「c

記事を読む

技術評論社の無料小冊子「電脳会議」がITエンジニアにおススメ

この、電脳時代!!音楽でも本でもなんでもかんでも電子化されている昨今だけど、技術評論社が発行してい

記事を読む

応答速度28.8倍。WordPressをApacheからNginxに移行して感じたブログ運営

昔からやろうやろうと思って出来ていなかった、このブログ(Wordpress)のWebサーバをAp

記事を読む

WordPressの任意の記事にだけ目次をつける方法(Table of Contents使用)

ブロガーの皆さん、記事に目次つけてますか?   「つけたい日もあれば、つけたくない日もある」

記事を読む

10分で設定完了。WordPressに監視サービスNewRelicを無料で導入してみた

アカウント登録からはじめて設定完了まで10分程度。恐ろしいほど手軽に導入できるくせに、情報量が半

記事を読む

日本初のDrupalイベントでスピーカー登壇してきました in Drupal Camp Japan Kyoto

春うららかな4月の京都。日本初のDrupalCampというイベントで、光栄にもスピーカー登壇して

記事を読む

サイトイメージががらりと変わるWebフォントを導入してみた。簡単で効果はでかい。使用前後のイメージを添えて。

元旦の朝、ガキ使の録画を見るという重大なミッションが残されているハマコー(@hamako9999

記事を読む

オンラインプログラミング学習の雄、Codecademyのスマフォアプリが出た。その狙いは?

以前から激賞しまくっているCodecademy。 Codecademyがプログラミング学習に最

記事を読む

WordPressのStingerを自由自在にカスタマイズするための8つの修行

Stinger Advent Calendar 2013、19日目担当のハマコー(@hamako9

記事を読む

ValutPress使いは要注意!WordPressバックアップの落とし穴

WordPressで日々ブログを更新されている皆さん、ブログデータのバックアップはとっていますか

記事を読む

a8.net DMMmobile

adsense

ハマコー(@hamako9999
hamako9999

SIerでコンシューマ向けサービスの開発してます。ブログはAndroid成分多め。WordPressやガジェット少々。たまに子育てやランニングが混ざります。

お問い合わせはhamako9999.netについてよりお願いします。

PAGE TOP ↑