誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
感情を揺さぶるWebサイトをデザインする方法
AlanはIT分野で非常に多くの経験を持つ熱心な技術ブロガーです。現在はカリフォルニアのロサンゼルスにあるウェブサイトのデザイン、開発、インターネットマーケティングを手掛けるSPINX Digital Agencyで仕事をしています。 私たち人間は、自分たちが論理に従って選択をする理性的な人間だと思っています。しかし実際は非常に感情的な生き物です。理性的だと考えようとすればするほど、感情は決断により大きな影響を与えます。 WebデザイナーはWebサイトがどのような感情を引き起こすものかを考慮に入れなければなりません。あなたの意図することを伝えるだけでは十分ではないのです。感情的な反応を引き出せないWebサイトはすぐに忘れられてしまいます。Webサイトをデザインするときには、人の感情を考慮する必要があります。 感情とWebデザイン Donald Normanは『Emotional Desig
スマホデザインで見やすいサイズ、行間は？デフォルトのアプリ等を調べてみた｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは、デザイナーの小林です。 最近スマホデザインで、アプリデザインや、機能性を持たせたUIのデザインが求められることが多くなってきました。 Photoshopで幅640pxで作成後、実機で確認をするのですが、どうも文字サイズを決めるのに毎回迷ってしまいます。 「小さすぎるんじゃないか？」 「見出しと本文の違いがパッと見で分かるだろうか？」などなど… そこで普段見慣れているだろう、スマホのデフォルトの純正アプリや有名アプリの文字サイズを調べてみました。 検証方法 iPhone4S（古くてスイマセン）でキャプチャーとる Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。） ホーム画面 通話履歴 メール リマインダー メモ帳 ミュージック Google Chrome Facebook Twitter Youtube はてなブックマーク evernot
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
ウェブデザイン配置のちょっとした「もやもや」をスッキリさせる解決例。 | バニデザノート
ウェブデザインでの配置で、「ルール通りにやっているのにどこかうまくいかない」場合にどうやって解決していくかを考えてみました。今回の例題画像は、すべてクリックすると100%表示のデータを表示するようにしてあります。 ウェブデザインのちょっとした「もやもや」を、少しだけスッキリしたデザインにするヒントになれば嬉しいです。
新しいロゴとマンガでイメージを一新した、明光義塾の広告 朝日新聞社広告局 - @ADV
印刷する クリエーターインタビュー 新しいロゴとマンガでイメージを一新した、明光義塾の広告シンガタ アートディレクター 水口克夫さん 2010/09/15 子どもから大人まで年代問わず親しまれる、話題の広告を数多く手がけているクリエーティブエージェンシー、シンガタのアートディレクター水口克夫さん。 現在、明光義塾の広告も水口さんが担当する仕事のひとつ。ロゴのリニューアルからマンガを使ったテレビＣＭ、新聞広告など、具体的な制作過程について聞いた。 ――明光義塾の仕事は、いつ頃から担当されていますか？ 2005年から手がけています。広告制作をブランディングからトータルで担当させていただいています。最初は、ロゴマークのリニューアルから取りかかりました。 ――具体的に手がけられた内容を教えてください。 明光義塾は個別指導が特色のひとつ。一方的に教えるのではなく、解決のヒントを与えて創造力や自立心
主観的にデザインを決定するのは大きな間違い ─成果につながるWebデザイン
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
Web制作に欠かせない 様々なpsd素材を集めた「50 Free High Quality and Inspirational PSD Files for Download」
Web制作に欠かせない 様々なpsd素材を集めた「50 Free High Quality and Inspirational PSD Files for Download」 webデザインを行う際にとても便利なpsdの素材。持っていると何かと便利で重宝すると思います。そんな中今回紹介するのは、 様々なpsd素材を集めた「50 Free High Quality and Inspirational PSD Files for Download」です。 （Wraps and Ribbons pack by *plakkert on deviantART） 使い勝手のよいデザインパーツから、webデザインにそのまま使えそうなものまで種類は豊富。中でも気になったものをいくつかピックアップしました。 ■「4 step process panel in 2 colors (PSD) :: Graph
ウェブデザイナーのための実用的なデザインとコーディングテクニック集
Five Useful Design Techniques and Coding Solutions For Web Designers [ad#ad-2] 下記は各ポイントを意訳したものです。 PHPはWordPressでのものとなっています。 1. 複数の項目がある棒グラフのエフェクト 2. ホバー時に追加情報を表示 3. カテゴリごとに異なるカラーを適用 4. ちょっと面白い画像のキャプション 5. ウェブのための印刷風デザイン おわりに -developersではなく、designers 1. 複数の項目がある棒グラフのエフェクト 下記のサイトで使用している棒グラフでは、上：タグの種類と数、下：コメントのついた記事と数、をそれぞれ素晴らしいエフェクトで実装しています。 こういった数値化されたデータは、ユーザーに対して有用なコンテンツの手がかりを提供し、ユーザビリティを改善することに
ウェブデザイナーとしてスキルアップするための20のメソッド
素晴らしいデザイナーは日々、自身のスキルを向上しています。 「もうここで十分です」と言って成功したデザイナーを誰も聞いたことがないでしょう。 ウェブデザイナーのスキルアップに役立つ20のメソッドを紹介します。 20 Methods for Upping Your Current Web Design Skills [ad#ad-2] 下記は各ポイントを簡潔に意訳したものです。 原文はそれぞれもう少し長いです。 ユーザーインターフェイスのデザインパターンのスタディ ウェブデザインのために最も良いUIをチェックし、研究してください。 ディテールに注意を払う 日常や他のウェブサイトのディテールを見て、自身のデザインにも多くを加える練習をしてください。 SEOのテクニック クライアントの多くはSEOサービスを提供するウェブデザイナーが好きです。 ウェブデザインのトレンドを知る ウェブトレンドは単に
2000個のフリーphotoshopパターンファイルを集めた「2000 Free Photoshop Patterns」
TOP > Design , Photoshop > 2000個のフリーphotoshopパターンファイルを集めた「2000 Free Photoshop Patterns」 WEBなどにかかわらず、背景や下地をデザインするのに役立つphotoshopパターンファイル。画像の大きさを問わず、つなぎ目の無い画像を生成するのに非常に便利な形式です。今日紹介するのは2000個のphotoshopパターンファイルを集めたエントリー「2000 Free Photoshop Patterns」です。 Flat Grungy Summer Stripes Seamless Patterns 様々なパターンが集められており、ジャンルやテイストを超えて。フリーパターンがまとめられています。今日はその中から幾つか気になったものを紹介したいと思います。 詳しくは以下 ■Metal Mesh Patter
デザインを見てて「？」が浮かぶこと。
最近思う、デザインに関する「なんで？」を書きたいと思うので、デザイナーな方とか、答えられそうな人は答えてくれると嬉しいんす。 この「なんで？」の想定しているサイトは、コーポレートサイトとか、学校のようなサイトとかの、ヘッダー、ナビ、メイン、サイドバー、フッターがある様な感じです。 フラッシュばりばりな感じのキャンペーンサイトとかは無しで考えてます。 ちゃんと伝えている事もあれば、明確な理由付けが出来ないために言えなかった事もあったりします。 トップページとトップ以外のページの関係性 ココで言いたいのは、全部「トップだけ違う」っていう部分だと思うです。 グローバルナビゲーションの位置が変わる 横ナビが縦ナビに変わるのは極端にしろ、トップではメイン画像（フラッシュ）が来て、その下にグローバルナビ。トップ以外のページは、上部にグローバルナビっていうパターン。 よく聞くのは、「トップだけ他のページ
ECサイトの色やデザインと購買意欲の関係 | Webクリエイターボックス
色と消費者 色はデザインの重要な要素のひとつです。しかし、全世界において共通しているとは言えません。北アメリカで注目されやすい色がインドでも同じとは限りませんよね。下記は北アメリカのオンライン消費者への色の働きです。 黄色 楽観的・若々しさ。ウィンドウショッピングをしている人の注意を集めるために使われます。 赤 エネルギッシュ。心拍数を高める色。緊急性があり、セール中の商品に使われます。 青 信頼と安全の色。銀行や企業のメインカラーとして使われます。 緑 裕福・リラックスを連想させる色。目に優しく、一連のプロセスを容易に見せます。 オレンジ 活発・活動的な色。「購入する」「購読する」などのCTAボタンに使われる事が多いです。 ピンク ロマンチック・女性的な色。若い女の子や女性に向けたECサイトで使われます。 黒 パワフル・滑らか・光沢など。高級な商品を扱うサイトで使われます。 紫 落ち着き
デザインは、デザイナーに任せるには重要すぎる - Feel Like A Fallinstar
なんて言葉があります。しばらく前のエントリーでも書いた、IDEOのティム・ブラウンによる言葉。 「デザイン思考」とか「UX」なんて単語に集約すると、出来損ないのユーザエクスペリエンス（自称）専門家みたいで嫌ですが、少し解釈を広げつつ、デザインをすることについて、つらつら書いてみようかなと。 失敗が成功の早道 では、なぜデザインをデザイナーに任せないのか？ それは全てのデザイナーが、とは言いませんが、所謂「デザイナー」「クリエイター」が消費者と比較的切り離されたところでデザインを行ってしまっていることが原因なんだと思います。 卑近な例で言うとバナー広告とか。 クリエイターが経験則であれこれ悩む暇があったら、世に放り込んでみれば、数字でも言葉でもちゃんとフィードバック（欠点/改善点）が跳ね返ってくる。 これが、人間中心のアプローチ。 ちゃんと良い失敗を早期に行うことで、最後の成果がぐんとアップ
| blog.ryow.net
アクセス解析エンジニア・兼・クリエイターの僕としては、強みが一個だけあります。 それは、コンテンツ制作の表も裏も読み解けるということ。 で、2010年になってようやく時代が変わりつつあることを実感し始めました。 ナウシカ […]
Photoshopでウェブサイトをデザインする方法 / ウェブデザインライブラリー
投稿日：2010年01月12日 レベル：中級者 ソフトウェア： このチュートリアルでは、Photoshopでウェブサイトをデザインする方法を紹介します。 Step1 ： はじめに Step2 ： タブ型のボタンを作る Step3 ： ロゴ、スローガンを配置する Step4 ： 6つのボックスを作る Step5 ： テキスト・画像を配置する Step6 ： 完成 新規ドキュメントを1000ピクセル×1355ピクセルで作成し、 「#2493b0」と「#23454c」の色を選択してグラデーションツールのリニアグラデーションを使って背景を塗ります。 最も明るい色を画面の上にします。 長方形選択ツールで、横がキャンバス幅、縦が50-150ピクセルの長方形を描いたら、 「#222223」の色で塗ります。すると次のようになります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
吹き出し素材専門サイト「フキダシデザイン」
売れるデザインのしくみ、ざっくりノート - 4mimimizu blog
新着記事
IDEA * IDEA