Webサイト制作の一連の流れをまとめてみました
Webサイト制作の一連の流れをまとめてみました。クライアント向けにまとめたものを少し手直ししてのせています。新人Web担当者さんや、新人ディレクターさんの参考になるかなと。 なるべく難しい言葉を使わず、理解しやすいよう平易な言葉で書いております。 ※流れや手順は制作会社によって違うのですが、概要はつかめるかなと思います。 目次と流れ 1. サイトのコンセプトを考える 2. 競合他社からクライアントのお店や商品を選んでもらうためのポイント（強み）を整理する 3. そのサイトで一番伝えたい内容を決める 4. お客さんが必要とする3以外の情報や、クライアントの伝えたい情報をまとめる 5. サイト更新は誰がするのかを決める 6. 想定使用デバイス（PCやスマートフォンなど）を決める 7. サイトの周知・宣伝方法を考える 8. ページの設計図をつくる 9. サイト制作にかかわる必要な素材を準備する
ベーシックなストライプの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ま
Photoshopで少しでも作業時間を短縮するためにしていること6つ
（上記ショートカットは全てコンフリクトしていたのですが、元々使っていなかったショートカットだったため、気にせずそのまま設定しました） 2. 共通パーツのスマートオブジェクト化 例えばリンクアイコンの▶など、ファイル内で同じ形、同じ色のものはスマートオブジェクトに登録しておくと便利です。 色や大きさを変更をするとき、1つのスマートオブジェクトを変更すると全体を変えることができます。 3. ツールプリセットの活用 ツールプリセットは、自分の良く使うツールを登録して使うことができます。ショートカットじゃダメなの？ という疑問もあると思うのですが、ツールプリセットでは、特定のサイズのブラシや、特定のシェイプなど、○○ツールの○○、というように詳細に登録することができます。 例えば私は、右向きの三角形や星のシェイプなど、良く使うものを登録しています。 登録方法は、そのツールを選んだ状態で、右から2番
テキストのメリハリをつける方法7つ
私のデザイン修正で一番多い指示が、「メリハリをつけてください」で、以前はどうすれば良いかわからず困っておりました…。(今も時々わからなくなりますが…) 最近ようやくどうすればメリハリがつくかわかってきたので、その方法をまとめてみました。 「メリハリをつけてください」の修正意図は、目立つべきところが目立っていないので、重要な部分を視覚的にはっきりさせてください、ということだと思います。 例として、以下のような見出しとテキストをもとに考えてみます。 （メリハリをつける場合、サイト全体のバランスをみてつけることが必要ですが、ここではわかりやすくするため、見出しと説明文のみで考えています） （引用：Wikipedia: カメラ http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%A1%E3%83%A9） 私の場合、メリハリをつけるのは以下7つの方法が多いです。
ヴィジュアル要素の表現方法
ヴィジュアル要素をつくるときに使えるような、表現方法をまとめてみました。 メインビジュアルなどをつくるとき、うまく思いつかず困ってるんだよねーって方の参考になるかな、と思います。 ヴィジュアルの表現方法としては、大きく分けて以下の2種類があります。 ■直接的な表現 人・物・動物・タイポグラフィなどそのものを主役に置いた表現。 ■間接的な表現 抽象的なメッセージを主役に置いた表現。「たとえ」や「見立て」の技法を使う。 今回は、間接的な表現の中でどんなものがあるか、修辞技法をもとにまとめてみました。 言葉だけ聞くと難しく感じるのですが、普段私たちが話し言葉でも良く使っているものですので、理解しやすいと思います。 比喩 直喩法 直喩（明喩、シミリー）とは「（まるで・あたかも）～のようだ（ごとし、みたいだ）」のように、比喩であることを読者に対し明示している比喩である。 「修辞技法」（2011年12
Webデザインの評価項目をつくる
Webデザインの評価項目というのを、ディレクターやデザイナーの方々はつくっているでしょうか？ 評価項目があると、デザイナーやディレクターだけでなく、クライアントにとってもデザインの基準がわかりやすくなり、目標地点が明確になります。 今までつくったことがなかったという方は、この機会につくってみてはどうでしょうか。 改めて、Webデザインの評価項目をつくるメリットです。 デザイナー、ディレクター、クライアントにとって、デザインを評価する共通認識を持つことができ、三者間で認識のブレが少なくなる デザインの優先すべき項目（もっと企業の色を出したい、など）がわかりやすくなり、それをデザインに反映させることができる デザイナーは、すでに満たされている要素にそれ以上時間をかけることがなくなり、足りない要素に注力できる デザインの評価項目とデザインエレメント一覧表 私はWebデザインの評価項目を、以下のよ
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ページを開く
