TwitterやFacebookのデザインを良くみてみると、立体感のつけ方に一工夫あるのがわかります。（現在のデザインになってからだいぶ経っており、今更な感じですが…）その立体感のつけ方が洗練されていて良いなぁと思ったので、どのように作られているかをまとめてみました。 再現PSDデータをダウンロード ※アイコンは本物と異なっており、形の近いものを使っております。ご了承ください。 1. Twitter ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出してみました。 アイコンと文字（現在地表示） アイコンと文字（通常表示） ボタン これらを再現してみると、以下のようになります。 偽Twitterみたいな感じですねｗ それぞれにつけた効果の詳細は実際のファイルでご確認ください。 2. Facebook（アプリ） ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出

コツコツと作りためていたPhotoshop用のパターン素材を配布してみます。 下の画像だとわかりづらいですが、背景がグレーの部分を透過しているものが多いです。 なので色を重ねたり、描画モードを変えたりして色々と組み合わせて使うことができます。色や描画モードによって表情も変わってくるので、ぜひお試しください。 使い方 ダウンロードしたzipファイルを解凍する。 パターンファイルを選択し、開いているPhotoshop内にドラッグする。 それで追加されなければ、『レイヤースタイル』→『パターンオーバーレイ』→パターンのサムネイルクリック→右の設定アイコンをクリック→『パターンの読み込み』を選びます

#LOVEFONT企画16日目担当の kanako29 ですこんにちは。 LOVEFONTでは自分の愛するフォントについて熱く語ろうということで、今回私は、「Comfortaa」というフォントを紹介します。 Comfortaa について Comfortaa の作者は、aajohan さん。 こちらのフォントは、2008年に制作されたようです。 ライセンスは、SIL Open Font License で、商用無料で使用することができます。 ウェイトは、Light, Regular, Bold の3種類です。自分は太めの方がコロッとしてかわいいと思うので、Bold +「アンチエイリアス強く」で使用することが多いです。 Comfortaa の好きなところ 私が Comfortaa を好きなところは、クセが少なくシンプルでかわいらしいところです。 特に小文字が良いです。a, b, d, p, q

私のデザイン修正で一番多い指示が、「メリハリをつけてください」で、以前はどうすれば良いかわからず困っておりました…。(今も時々わからなくなりますが…) 最近ようやくどうすればメリハリがつくかわかってきたので、その方法をまとめてみました。 「メリハリをつけてください」の修正意図は、目立つべきところが目立っていないので、重要な部分を視覚的にはっきりさせてください、ということだと思います。 例として、以下のような見出しとテキストをもとに考えてみます。 （メリハリをつける場合、サイト全体のバランスをみてつけることが必要ですが、ここではわかりやすくするため、見出しと説明文のみで考えています） （引用：Wikipedia: カメラ http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%A1%E3%83%A9） 私の場合、メリハリをつけるのは以下7つの方法が多いです。

自作アイコンがたまってきたので、特に自分が良く使うシンプルなアイコンを配布してみます。SVG形式でイラストレーターで編集できます。アイコンは、商用無料でクレジット表記なしでお使いいただけます。 ご使用にあたって 以下を守ってお使いください。 禁止事項 × 再配布、またはダウンロード可能な状態にすること × 販売 × 素材への直リンク 許可事項 ○ パスの変更・着色・拡大縮小などの加工 ○ 商用・非商用サイトでの使用 ○ Web、プレゼンなどの資料、ソフトウェア、印刷物への利用 ある程度縮小しても、視認性を保てるようにつくりました。また、シンプルなので、どんなサイトでも使えるかなと思います。お役に立ちましたら幸いです。

Webサイトにおいて、レイアウトの基本的な型と、レイアウトからデザインまでの流れを簡単にまとめてみました。 レイアウトからデザインまでの流れを把握しておくと、その間の思考が分断されずデザインがしやすくなると思います。 また、ユニークなレイアウトにするにしても、あらかじめ基本的な型を知っておくと逸脱がしやすくなりますね。 レイアウトに影響を与える要因 レイアウトにはいくつかの型がありますが、まずその型を決定する前に、レイアウトに影響を与える要因を知っておく必要があります。これらの要因によって、レイアウトの型があらかじめ決まったり、レイアウトが大きく変わるからです。 情報階層の深さ →1ページのサイトなのか、第二階層以降ありグローバルナビゲーションが必要になるのか、など サイトの目的・属性 →そのサイトでは何を伝えたいのか。企業・ブランドのメッセージや情報、ユーザーに役立つ知識（Wikiped

3月いっぱいで勤めていた会社から解雇され（業績不振のため）、4月から無職になった管理人ですどうもこんにちは＼(^o^)／ 業績不振で解雇されたというと、「ああ不況なのね…」って感じがしますが、どうやら良く考えるとそれだけじゃないのではと思いました。 なので、ちかごろさいきんのWeb制作業界のことと、制作に携わる人は今後どうしたら良いのか、ということをつらつらと書いていこうと思います。 ※ちょっとネガティブ目線も入ってしまいますが、批判をしているわけではなく、このままで良いのかな、という問いかけです。 ※また、こういう会社じゃだめ、ってことではなく、こういう傾向になってるんじゃ、という考察です。 Web制作会社は二極化が進んでいる まわりのWeb関係の友人に話を聞いていると、Web制作会社は以下の二極化が進んでいると思いました。 A. 安い価格で制作物はそこそこのクオリティ、夜遅くまで対応し

フォントの基本的な選び方を、備忘録的にまとめてみました。 フォントをどう選んだら良いのかわからない、もしくは選ぶのに時間がかかるという初心者さん向けです。 フォントには、それぞれ書体によって特徴があり、ユーザーに与えたい印象によって書体を選ぶ必要があります。 （それに縛られすぎてもいけませんが…（あえてインパクトを出すために違う印象のフォントを組み合わせたりする）、基本的な選び方として知っておくと良いと思います。） 私は以下の順番でフォントを選んでいます。 恐らく他のデザイナーさんも、この順番だと思います。 1. フォントの系統選び 2. 選んだ系統から、さらに書体を選ぶ 3. 書体のウェイトを決める 4. 字間の調整 さらに具体的な手順を1つずつ説明していきます。 1. フォントの系統選び 日本では、和文フォントと欧文フォントの2つを使います。 また、和文フォントは、以下の4つに大きく分

Webデザインの評価項目というのを、ディレクターやデザイナーの方々はつくっているでしょうか？ 評価項目があると、デザイナーやディレクターだけでなく、クライアントにとってもデザインの基準がわかりやすくなり、目標地点が明確になります。 今までつくったことがなかったという方は、この機会につくってみてはどうでしょうか。 改めて、Webデザインの評価項目をつくるメリットです。 デザイナー、ディレクター、クライアントにとって、デザインを評価する共通認識を持つことができ、三者間で認識のブレが少なくなる デザインの優先すべき項目（もっと企業の色を出したい、など）がわかりやすくなり、それをデザインに反映させることができる デザイナーは、すでに満たされている要素にそれ以上時間をかけることがなくなり、足りない要素に注力できる デザインの評価項目とデザインエレメント一覧表 私はWebデザインの評価項目を、以下のよ

Webサイトのデザインをデザイナーさんに頼んで、上がってきたデザインがすごく良いものと、あまり良くないものがあります。 その差はどこにあるんだろう？って考えたとき、その理由の1つとして、マーケティング視点でデザインを考えられているかどうか、ということに気がつきました。 ですので、今回の記事では、デザイナーにあると良い基本的なマーケティングの視点をまとめてみました。マーケティングのことがほとんどわからないというデザイナーさん向けです(╹◡╹) 私が思う、デザイナーにあると良い基本的なマーケティングの視点は、次の3つです。 Webサイトの「目的」がわかる 企業や商品の「強み」がわかる ユーザーの「利益」がわかる では1つずつ具体的にみていきます。 1. Webサイトの「目的」について Webサイトにはどういった目的があるのか Webサイトは、何らかの目的があってつくられています。 よくある目的

デザイン上級者は、中級者と初心者と何が違うんだろう？って思った時に、こちらの本が役に立ちました。 『上達の法則 – 効率のよい努力を科学する –』という本です。この本には、碁や茶道など、あらゆる分野に共通する上級者の特徴がのっています。この本を参考に、デザイン上級者の特徴と、上級者になるための実践方法を書いてみました。 デザイン上級者の特徴 1. 上級者は一つのデザインから読み取ることが多い 一つのデザインを見たとき、上級者の方が中級者、初級者よりも気づくことが多いです。例えば、背景に薄くグラデーションがかかっているとか、縦のグリッドのラインが揃っているなど。 また、そのデザインからたくさんの情報を引き出しているので、長く見ても退屈しにくいという特徴を持っています。 2. 上手なデザインをするということに高い価値をおいている 上級者は、デザインに対して本気で取り組む度合いが高いため、上手な