フラットデザインな配色やレイアウトを参考にする時におすすめのページ。CategoryやColorShemeでの分類が便利
公開日:
:
最終更新日:2016/03/30
programing
最近ようやく、WordPressで自分が採用しているテーマStingerのデフォルト状態から、デザインを変更してみたハマコー(@hamako9999)です。
CSSど初心者には、TOPとかのレイアウト変更にこれでも苦労したんですよ・・・
デザインをいじるにあたって、「どうせなら、今流行りのビッグウェイーブにのってみよう」ということで、フラットデザイン的なのを作るのに参考になるサイトを、をいろいろググってみました。
ググった過程で、やたらはてブついてるけど、あんまり参考にならなかったサイトや、逆に、はてブ全然ついてないけど、物凄い参考になったサイトがあったので、ご紹介いたします。
最後でおすすめしているサイトは、デザイン理論とか全然知らない自分には、直感的ですっごい役に立ちました。
スポンサーリンク
あんまり参考にならなかったサイト
フラットデザイン参考にする過程で、はてブつきまくってるので、初期にこのサイト見てみました。気になった色をクリックすると、その箇所のカラーコードをクリップボードにコピーしてくれるという親切設計であります。
で、実際に画面に使ってみた第一印象は「濃い・・・なぁ」という事。サイトのイメージによるので、構築サイトのイメージによってはもちろん当てはまる場合もあると思うんですが、全般的に濃いので、範囲が広い部分で、グレースケール以外をつかうと、存在感が強すぎました。
もうちょっと薄くしてみようと思ったりもしたけど、このページはコレ以外特にカラースケールが用意されているわけではないので、発展性も無し。
(゜-゜) ウ~ン、これだけじゃなんとも。
結構参考になったサイト
Flat UI – Free User Interface Kit
入力フォームとかメニューバーとかのデザインが紹介されてます。こっちは、メニューバーのイメージとか考えるときに参考になりました。それ以外も入力フォームや各種スイッチなんかも、いろいろ紹介されているので使いやすいと思います。
カラースキーマ設定できたら、最高に便利なのになぁ。惜しい。
最高に便利なサイト
はてブ殆どついてないけど、こいつは(・∀・)イイ!! フラットデザインの要素を紹介するというよりは、フラットデザインされているサイトを色んな分類で検索できるサイト。
分類フィルタが使いやすい
見ての通り、サイト上段で以下の分類でフラットデザインなサイトを検索できますと。これが素晴らしい!!
- CATEGORY
- STYLE
- TYPEFACE
- COLOR SCHEME
- SWATCHES
デザイン変更前の、自分のブログデザインの勝手なイメージはこんなところ。
- イマドキな感じにしたい→フラットデザインにしてみよう
- 淡い色でデザイン系ブログのイメージにするのは避けたい
- そもそもデザインの話、全く出てこないし
- たまにはシモネタも書くかもしれない
- 個性だしたいから、フラットデザインであまり見ないオレンジを使いたい
ココらへんのイメージを最初に固めておいて、上のサイトからColor ShemeをOrangeで検索。
ずらりと並んだサイトから、自分のイメージに近いサイトを選びましょう。ほいさっさ。
カラーコードの取得がやりやすい
素敵と思ったサイトがあったら、おもむろにサイト右下にでている代表カラーのボックスにマウスオーバーすると、なんと!!その、 カラーコードがピロっと表示される。
かゆいところに手が届くこのUI。おっちゃん感動するわ。こういうのが、今流行りのUXってやつなんでしょうか。
サイトの全体イメージとして自分が「こんな感じにしたいなぁ」という直感からサイトを探し、具体的にカラーコードを取得するまでの流れが凄いシームレスになので、はかどるはかどる。
素人にこそオススメ
自分、デザイン畑に完全に縁遠い人間なので、色相とか彩度とか、タイポとか全くよく知らないんです。でも、とりあえずこんな感じにしたいなぁというサイトイメージは有りましたと。
そんな人が、手っ取り早くサイト全体のイメージから、カラーコードを取得するには凄い使いやすいサイトなので、使ってみるとよろしいんじゃないでしょうか。
それでは、今日はこのへんで。ハマコー(@hamako9999)でした。
PC-記事下-サブ(Amazon)
programingの記事一覧
ブログ主について
関連記事
-
-
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で日々ブログを更新されている皆さん、ブログデータのバックアップはとっていますか