[B! レイアウト] okishima_kのブックマーク

Webページのレイアウトに役立つ20のデザインテクニック

ページのレイアウトをする時に全てが同じ大きさ・形・色だと、それは非常に退屈なデザインになってしまいます。要素を整理し、階層をつくり、重要な箇所にフォーカスがあたるようにするにはコントラストを効果的に使うことです。レイアウトにビジュアルの興味を加え、デザインを生き生きとさせるコントラストの使い方を紹介します。色の値(value)とはカラーの明るさや暗さをあらわす用語で、ピュアブラックとピュアホワイトに最もコントラストがあります。だからといって高いコントラストのデザインをつくるために、白黒のカラーパレットにこだわる必要はありません。簡単な方法の一つは、そのカラーからより明るいカラーと暗いカラーをつくり、コントラストを加え、あなたのデザインの特定の場所を目立たせることができます。シンプルな例として、下記のような暗い背景に明るいテキストは効果的にコントラストをつくっています。背景が写真で、テ

okishima_k 2015/09/29

リンク

クリエイティブな広告やポスターのデザインから学ぶ！参考にしたい文字レイアウト

広告やポスターをデザインする際、ときにはコピーの配置やレイアウトに悩むこともありますよね。そんなときに文字レイアウトや配色が参考になりそうな広告・ポスターをご紹介します。広告デザインに参考になる文字レイアウト　選では参考になるデザインをご紹介します。アニメ王決定戦のポスター出典：kettle.co.jp こちらは2011年に開催された、au EZwebから参加できるアニメ王を決めるためのクイズ大会。文字に帯を引いたり、注目させたい文字への色使いの変化が目立ちますね。2011年の作品です。 LUMINE 出典：magazine.lumine.ne.jp こちらはLUMINEの広告の中でも色使いがシンプルなもの。中央に大きくレイアウトされた文字は、半透明なのにきちんと可読性があり、白い文字の透かし具合が絶妙です。新村水産出典：shinmurasuisan.net こちらは「新鮮な魚

okishima_k 2015/06/18

リンク

デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則

このブログ、Webデザインレシピのデザインをリニューアルしました。この機会にデザインを勉強したことがない人でも、楽しくデザインをすることができるかもしれない、基本原則 4つをご紹介します。この原則は「ノンデザイナーズ・デザインブック」著者 Robin Williams で詳しく解説されています。古い本ですが、とっても素晴らしい本で今では新装増補版となって発行されているようです。今回、このブログ – Webデザインレシピのデザインを、ガラッと変えてみました。これを機会にちょっとデザインの基本というか、デザインをするときにガイドとなる、4つの原則をおさらいしておきます。Webデザインに限らず、会社で提出する報告書や学生さんのレポート、レストランのメニューなど、ページと呼べるものには全部当てはまると思うので、Webサイトを作るとかじゃなくても、知っておいて損はないかもしれませんね。せっ

okishima_k 2015/06/16

リンク

最近のWebデザインで採用されているレイアウト72種類を収録した無料のUI素材（PSD, AI, Sketch） -UI Tiles

最近のWebデザインでよく利用される1カラム、2カラム、3カラム、カード型、ボード型の基本的なグリッドをはじめ、ランディングページ、プロダクトページ、ギャラリー、ポートフォリオ、カート、FAQ、コンタクト、マップなど、さまざまなレイアウトが用意されたワイヤーフレームやフローチャートを作成するための素材を紹介します。 UI Titles UI TILES: WEBSITE FLOWCHARTS ダウンロードできる素材のフォーマットは、4種類。 .psd（72種類のレイアウトとチャート） .ai（72種類のレイアウトとチャート） .sketch（72種類のレイアウトとチャート） .png（72種類の各レイアウト）各フォーマットにはそれぞれ72種類のレイアウトとチャートが揃っており、ワイヤフレームやフローチャートやサイトマップとして利用できます。

okishima_k 2014/12/09

リンク

フロートボックスが並んだ時の右端のがカラム落ちしない方法みたいなのとIEのコメントバグ

タイトルが長い… サイトやブログの価値を調べる10の指標とツール｜前向きストラテジー 10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか？ボクはしっかりバテてダレてます。あんまり仕事してま…（加藤さまに給与減らされるので自重しました）さて、そんな訳で本題ですが、下記みたいなレイアウトの時のお話です。一番書きたかったフロートボッ（略）みたいなのサンプルとダウンロードサンプルページダウンロード今回の本題は「ほげほげ」って書いてあるところのボックスに関してだけ書くつもりが遊んでいるウチに気になった事があったのでそちらも書こうと思っております。何はともあれ、この「ほげほげボックス」ですが、main areaは10pxのpaddingが指定されてて、その中にこんな感じでぴったりなボックスがぽこぽこ並ぶときって、