レイアウトの基本的な型と、レイアウトからデザインまでの流れ
Webサイトにおいて、レイアウトの基本的な型と、レイアウトからデザインまでの流れを簡単にまとめてみました。 レイアウトからデザインまでの流れを把握しておくと、その間の思考が分断されずデザインがしやすくなると思います。 また、ユニークなレイアウトにするにしても、あらかじめ基本的な型を知っておくと逸脱がしやすくなりますね。 レイアウトに影響を与える要因 レイアウトにはいくつかの型がありますが、まずその型を決定する前に、レイアウトに影響を与える要因を知っておく必要があります。これらの要因によって、レイアウトの型があらかじめ決まったり、レイアウトが大きく変わるからです。 情報階層の深さ →1ページのサイトなのか、第二階層以降ありグローバルナビゲーションが必要になるのか、など サイトの目的・属性 →そのサイトでは何を伝えたいのか。企業・ブランドのメッセージや情報、ユーザーに役立つ知識（Wikiped
[Dreamweaver]Zen-Codingのショートカットキーをカスタマイズ＋おまけ
Zen-Codingの一番良く使う変換機能のショートカットをカスタマイズして、ちょこっと便利に、さらに効率化する方法です。 DreamweaverでZen-Codingを使うとき、変換機能のショートカットが「Ctrl」＋「,」なのですが、これだとちょっとやりづらくありませんか？ なので、キー変換ソフトを使って、ワンタッチで変換させようと思います。 1.キー変換ソフトをダウンロードする キー変換ソフトは色々あるのですが、「Change Key」がおすすめです。 Change Keyのダウンロードはこちら 2.キーボードをカスタマイズする Change Keyを立ち上げます。 使い方は簡単で、さわってみるとわかるのですが、念のため… まず、変換したいキーをクリックします 次に、置き換えたいキーをクリックします。ここでは、「F1」キーに変更します。 なぜ「F1」なのかというと、「F1」はほとんど
![[Dreamweaver]Zen-Codingのショートカットキーをカスタマイズ＋おまけ](https://cdn-ak-scissors.b.st-hatena.com/image/square/1e21a6cc90f9399d8d0f9601f0ff96ac4996fec7/height=288;version=1;width=512/http%3A%2F%2Fwww.ar-ch.org%2Fwp%2Fwp-content%2Fuploads%2Fimg_100429_s.gif)
ページアップ後ディレクターがチェックすべきポイントと便利ツール5つ
HTMLページをアップ後にWebディレクターが特にチェックすべきポイントと、そのチェックをするために便利なツール5つをご紹介します。 1. コーディングミスの有無を調べる コーディングミスについて コーディングは、Firefoxのアドオン、HTML Validatorでチェックします。 まずはHTML Validatorをダウンロードします。 こちらの右下に赤で×印があると、コーディングにミスがあるということを示しています。 （緑のチェックマークは、ミスがないことを表しています。） 赤の×印をダブルクリックして、ソース画面を開きます。 エラーのある行番号と、そのエラー内容がわかります。内容は英語なのですが、なんとなくわかるはず。 この場合は、ID名が重複しているよ、ってことです。 このエラー内容をコーダーさんに伝えて、修正をしてもらいます。 2. JavaScriptエラーの有無を調べる
ベーシックなストライプのPhotoshopパターン 460個セットを作りました ： 460 Basic Stripe Set
ベーシックなストライプのPhotoshopパターン 460個セットを作りました ： 460 Basic Stripe Set 仕事でストライプのパターンを良く使うので、まとめて作ってみました。ストライプのパターンは、斜め・縦・横の3種類、白と黒（背景透過）、線幅2pxごと、線幅の間隔は等倍・1.5倍・2倍の全460個です。 (stripe.zip:571KB) Zipファイルを解凍後、パターンファイルをPhotoshopにドラッグ＆ドロップするとパターンが追加されます。 商用利用OK、印刷OKです。再配布はNGです。ご使用の際の報告やリンク、著作権表示は不要です。お気軽にお使いください。 ストライプパターンについて 斜めのストライプは、英国式の右上がりです。 線の色が白と黒なので、描画モードを「オーバーレイ」等にすれば、大体どんな色にでもできると思います。 線幅は、1pxと、2～50pxま
デザインイメージを表す言葉まとめ
ちょっと仕事で使うことがあったのでメモ的エントリです。 デザインイメージを表す言葉を思いつく限り書き出し、五十音順に並べてみました。 使えない言葉もあると思いますが、言葉の語彙を増やしたい方の参考としてどうぞ。 あ行 あ 明るい、温かい、安心感のある い 生き生きとした、インパクトのある う 初々しい え エネルギッシュな、エスニックな、エレガントな お おおらかな、穏やかな、落ち着いた か行 か 格調高い、活気のある、堅い、がっしりとした、活発的な、革新的な、カジュアルな、可憐な、ガーリーな き 規律性のある、キュートな、きれいな く クールな け 健康的な、堅実な、元気な こ 高級感のある、高貴な、ゴージャスな、古風な さ行 さ さわやかな、斬新な し 静かな、親しみやすい、シャープな、女性的な、自由な、重厚な、情熱的な、上品な、新鮮な、神秘的な、シンプルな、信頼感のある スイートな、
デザイナーへのデザイン指示はどのようにしたら良いか？
あなた（ディレクター）がデザイナーへデザインの指示をするとき、どのようにしていますか？ クライアントからのざっくりとしたデザインイメージを伝えるだけで、意図したとおりのデザインを作れる人がまわりにいますか？いたらすごく幸せですね…。 でも、そういったスーパーデザイナーばかりではないと思います。 なので、ディレクターが指示をするときにはどうしたら良いかを考えて実践した結果、うまくいく場合が多かったのでその方法を書いてみました。 デザイナーの能力を正しく把握し、その段階に合った指示をする 私の会社では、デザイナーの能力を大まかに3段階に分けています。 それぞれの段階によって、指示方法を変えています。 第一段階（デザイナー歴 1年未満） デザインレベル こちらが指示した素材を使って、適切なレイアウトができる。 マージンのとり方など、基本的なデザインルールを知らないことがある。 ツールの使い方を熟
[Photoshop]マスクの方法まとめ
Photoshopのマスクのかけ方は、大きく分けて、『クリッピングマスク』、『レイヤーマスク』、『ベクトルマスク』の3種類があります。 それぞれの作成方法をご紹介します。 クリッピングマスク レイヤーマスク ベクトルマスク（CS6, CC） ベクトルマスク（CS5？以前） クリッピングマスク すぐ下にある下層レイヤーのオブジェクトの形に切り抜くマスクです。 一番簡単なマスクですが、オブジェクトを動かす時に、マスク部分も選択しなければいけないという煩わしさもあります。 01) 切り抜きたい形のオブジェクトを作成します。 パスの図形でも、フリーハンドの図形でも大丈夫です 02) 切り抜きたいレイヤーを、その上に置きます。 03) レイヤーの間を、「Alt+クリック」します。 アイコンが写真のように変化し、マスクがかかりました。 調整レイヤーも同じようにマスクがけできます。 レイヤーマスク 選択
![[Photoshop]マスクの方法まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/bb45a436e313479c083a441149c4b60b22112d10/height=288;version=1;width=512/http%3A%2F%2Fwww.ar-ch.org%2Fwp%2Fwp-content%2Fuploads%2F05_s1.png)
思わずおいしそうと言ってしまうシズル感あふれるサイト13個
食品系のサイトにとって、ユーザーにおいしさを訴求することはとても重要ですね。魅力的な写真を使い、思わず「おいしそう」と言ってしまう食欲をそそるデザインのサイトを13個集めてみました。 ちなみにシズル感とは、このような意味です。（Yahoo！辞書へ） 1. おどり寿しホームページ 回転寿司店のサイトです。 寿司ネタの色が黒バックに鮮やかに映えますね。また、薬味の色がネタを引き立てています。 2. Assiette Dojima | アシェット・ドージマ 大阪にあるダイニングゾーンのサイトです。 大きな写真が迫力ありますね。食品の照りやカラフルな食材が食欲をそそります。 3. Soup Stock Tokyo スープ専門店のサイトです。 スープの写真は彩度低めですがしっかりとおいしそうに見えます。サイト全体の洗練された素朴感も良いですね。 4. cinagro | シナグロ 原宿にあるレストラ
Webサイトの「目的」と企業の「強み」とユーザーの「利益」とデザインについて
Webサイトのデザインをデザイナーさんに頼んで、上がってきたデザインがすごく良いものと、あまり良くないものがあります。 その差はどこにあるんだろう？って考えたとき、その理由の1つとして、マーケティング視点でデザインを考えられているかどうか、ということに気がつきました。 ですので、今回の記事では、デザイナーにあると良い基本的なマーケティングの視点をまとめてみました。マーケティングのことがほとんどわからないというデザイナーさん向けです(╹◡╹) 私が思う、デザイナーにあると良い基本的なマーケティングの視点は、次の3つです。 Webサイトの「目的」がわかる 企業や商品の「強み」がわかる ユーザーの「利益」がわかる では1つずつ具体的にみていきます。 1. Webサイトの「目的」について Webサイトにはどういった目的があるのか Webサイトは、何らかの目的があってつくられています。 よくある目的
デザイン上級者 21の特徴
デザイン上級者は、中級者と初心者と何が違うんだろう？って思った時に、こちらの本が役に立ちました。 『上達の法則 – 効率のよい努力を科学する –』という本です。この本には、碁や茶道など、あらゆる分野に共通する上級者の特徴がのっています。この本を参考に、デザイン上級者の特徴と、上級者になるための実践方法を書いてみました。 デザイン上級者の特徴 1. 上級者は一つのデザインから読み取ることが多い 一つのデザインを見たとき、上級者の方が中級者、初級者よりも気づくことが多いです。例えば、背景に薄くグラデーションがかかっているとか、縦のグリッドのラインが揃っているなど。 また、そのデザインからたくさんの情報を引き出しているので、長く見ても退屈しにくいという特徴を持っています。 2. 上手なデザインをするということに高い価値をおいている 上級者は、デザインに対して本気で取り組む度合いが高いため、上手な
Webデザインの評価項目をつくる
Webデザインの評価項目というのを、ディレクターやデザイナーの方々はつくっているでしょうか？ 評価項目があると、デザイナーやディレクターだけでなく、クライアントにとってもデザインの基準がわかりやすくなり、目標地点が明確になります。 今までつくったことがなかったという方は、この機会につくってみてはどうでしょうか。 改めて、Webデザインの評価項目をつくるメリットです。 デザイナー、ディレクター、クライアントにとって、デザインを評価する共通認識を持つことができ、三者間で認識のブレが少なくなる デザインの優先すべき項目（もっと企業の色を出したい、など）がわかりやすくなり、それをデザインに反映させることができる デザイナーは、すでに満たされている要素にそれ以上時間をかけることがなくなり、足りない要素に注力できる デザインの評価項目とデザインエレメント一覧表 私はWebデザインの評価項目を、以下のよ
フォントの基本的な選び方
フォントの基本的な選び方を、備忘録的にまとめてみました。 フォントをどう選んだら良いのかわからない、もしくは選ぶのに時間がかかるという初心者さん向けです。 フォントには、それぞれ書体によって特徴があり、ユーザーに与えたい印象によって書体を選ぶ必要があります。 （それに縛られすぎてもいけませんが…（あえてインパクトを出すために違う印象のフォントを組み合わせたりする）、基本的な選び方として知っておくと良いと思います。） 私は以下の順番でフォントを選んでいます。 恐らく他のデザイナーさんも、この順番だと思います。 1. フォントの系統選び 2. 選んだ系統から、さらに書体を選ぶ 3. 書体のウェイトを決める 4. 字間の調整 さらに具体的な手順を1つずつ説明していきます。 1. フォントの系統選び 日本では、和文フォントと欧文フォントの2つを使います。 また、和文フォントは、以下の4つに大きく分
Dreamweaverの拡張機能まとめ
Dreamweaver用の拡張機能をまとめました。 便利なものばかりなので、ぜひお役立てください。 タグ挿入・文字列変換 コメントを生成して挿入するDreamweaver用拡張機能 <!– /#container –>などのコメントを簡単に挿入できます。 IDやClass名は自動で取得してくれます。 Adobe – Dreamweaver Productivity : Close Tags 閉じていないタグを閉じてくれます。 Adobe – : Adobe Dreamweaver 10周年セミナー：全角・半角変換拡張機能 全角の数字やカナを半角に直したり、その逆もできます。 携帯サイト作成にも便利ですね。 Zen-Coding DreamweaverでZen-codingが使えるようになります。 （CS3の方は、Zen Coding for Dreamweaver v0.5を選ぶといいかも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
