未経験からの転職で1,000サイト以上の構築を経験してきました。WEBは、努力を継続すれば未経験からも十分活躍できます。デザイン・ディレクション・転職のヒントやノウハウを発信します。全エントリーHomeデザインに入るまでの私の7つの手順デザインに入るまでの私の7つの手順2019/1/32019/09/22この記事は、私がトップページを作る際に気をつけている7つをフロー化した記事です。webデザイナーの方向けです。トップページを作るときに、みなさんはどんな順序で作っていきますか?やり方は個人・制作会社によって違うと思いますので、私がやっているフローを具体化してみました。デザインといえど、意外と事務的な作業が、中盤まで続きます。それが結構大事だと思うんですよね。早くPhotoshopを触りたいと思ってしまうのですが「急がば回れ」がデザインにも大事な気がします。目的・目標を理解せずにデザインをするべからず例1サイトから旅行のプランの成約!例2サイトのデザインを他社と差別化しブランドイメージの向上。webサイトからフォームにて家の資料請求を増やす!例3webサイトのお問い合わせフォームから、問い合わせの数を月間50件まで増やす!まずは、サイトで何を目標にするかを決めることが大切です。ブランドイメージを向上するために、このサイトで何が必要なのか?コンバージョンを高めるために、成約までの導線を適切に配置することや、説得力のあるコンテンツをしっかり作る事ができるか。目的・目標にあったデザインが求められますね。2.ペルソナの設定1番狙いたいターゲットに狙いを定める!例120代前半の旅行に興味がある女性。ネットにも慣れていて、安くていい旅行プランを探している例230代後半のマイホームの購入を考えている男性。毎週ハウジングセンターを回りハウスメーカーに迷っている。例350代前半の女性。自分の親がお世話になる老人ホームを探している。インターネットは、あまり得意ではないが、情報が多いネットを活用したいと思っている。サイトのゴールを設定したら、次は上記のような具体的なペルソナを定めます。これは、営業マンやwebディレクターが上流でヒアリングすることが多いですが、デザイナーがヒアリングすることも全然あります。定められたペルソナに対する具体的なデザインや技術的な提案と実装がデザイナーの仕事になります。20代女性と50代女性では、フォントサイズやwebリテラシーの配慮が変わってくるなど、デザインやサイトに施す技術のレベルも変えることが必要になりますね。3.デザインテイストの決定テイストのずれがないように上流でクライアントと共有デザインを作る前に、参考サイトの提示などである程度デザインテイストをクライアントと共有しておきましょう。デザイナーの出した案が通るとも限らないので、上流でのずれを無くすことがプロジェクト全体の効率化につながります。トップページが通らない(相手の期待値を上回れない)とクライアントもがっかりして信頼感を失うこともありますし、何といっても社内に重い空気が立ち込めます。認識を合わしていくためにも、上流でのすり合わせが大事ですね。「これは、絶対ないですよね?」というテイストをクライアントから引き出せると、地雷を踏みにくいです。4.ページの要素を掲載順に箇条書きまずは重要な要素を優先順位付けしようまずは、トップページに書く出す要素を、ワイヤーに書く前に「箇条書き」しましょう。箇条書きにも多少補足説明をつけておく。グローバルナビの並びもこの段階で決めます。強みのコンテンツは何で、何個あるのか?情報発信のコンテンツは、何があるか?など、かなり具体的に洗い出していきます。それを、どの順番で置くかまでをテキストでまとめて書き出します。5.参考サイト探し(1,000サイト程、要素ごとに参考探し)テイストや業種はずれていても構わない。部分的に探すのがコツ私は、トップに掲載する要素ごとに参考サイトを探します。1,000サイトぐらい、ざっと見てみて、その中から20サイト位いいものが見つかるかなという感じです。強みのコンテンツのレイアウトは、ここを参考に。フッターに置くサイトマップのレイアウトは、ここを参考にとか。自分が目指すデザインテイストのものも集めますが、業種が同じすぎると、デザイン的な差別化が難しくなるケースがあるので、異業種から探すことも大事です。探し方として、まずはPinterestで探します。webデザイン」とかで検索するとおしゃれなサイトが山ほどでますので、そこから部分的な参考や戦略的にいいものを見つけ出していく感じですね。参考サイト探しの時間は、1時間程度ですかね。時間をかけすぎるのは、採算的にも、迷うという意味でもよくないです。手書きでもAdobeXDでもPhotoshopでも何でもいいですここは、ディレクターがやったりデザイナーがやったり会社によって違うところですね。前述までの項目ができていると、それほど時間はかかりません。クライアントに見栄えよく出すなら、手書きじゃない方がいいかもですが、ツールは何でもいいです。大事なのは、何をどの優先順位で掲載するかが、クライアントに伝わるか?です。ワイヤーのレイアウトには凝っているが、コンテンツの内容が抽象的(テキストが入りますとか書いてある)な方がいますが、知りたいのはレイアウトの詳細ではないです。知りたいのは、ユーザーやクライアントが望むものをどのように掲載するかです。ワイヤーと全く同じレイアウトで作らなくても大丈夫ということにもなります。「ワイヤーに色を付けただけで提案がないなぁ」と指摘を受けるデザイナーの方は、ワイヤーから読み取れる本質に目を向けてみてください。7.デザイン作成開始(やっとデザインでPhotoshop使用)ここからがやっとPhotoshopの出番です前述のことが終わると、自分の中でもサイトに対するイメージや目的がかなり具体化しているはずです。あとは、それをデザインに起こしていくだけになります。いうほど簡単ではないですが、いきなりPhotoshopを触ってデザインを始めるよりは随分効率はいいはずです。「ターゲットの絞り込み」「デザインテイストの決定」「要素の選定」「要素の優先順位付け」「レイアウトの詳細を検討」「コンバージョンの精度アップの施策」ベテランのデザイナーでも、デザインをやりながら上記の項目も同時にやれる方は、多くはありません。新人のデザイナーができるとも思えませんので、一つ一つの工程を掘り下げてデザイン前に整理する。これが重要かなというのが、私の結論です。(0)この記事へのコメントはありません。返信をキャンセルする。SuiteXは、WordPress(ワードプレス)を簡単にインストール可能!トップページに戻るおすすめレンタルサーバー2019/8/241,000円未満の爆速サーバー探すなら、mixhost(ミックスホスト)一択ですこの記事は、mixhost(ミックスホスト)ってどうなんだろう?という方に向けWEBデザイナー・デ...2019/8/24mixhost(ミックスホスト)のサーバー基本機能まとめ!この記事は、mixhost(ミックスホスト)の契約関係・サーバー基本機能・Web機能・メール機能に...2019/8/13エックスサーバー(XSERVER)が中小企業に人気の理由!この記事は、色々なレンタルサーバーを比較していて、XSERVER(エックスサーバー)ってどうなんだ...2019-7-15中小企業担当者がレンタルサーバー選びに迷った時に見るページ!この記事は、中小企業のWEB担当者が、自社サイトのレンタルサーバーを選ぶ際に役に立つ記事です。2012年6月インフォメーションドメイン・サーバー相談フォーム全エントリーリスト【キャリア&年収アップ】私は中級者の転職にはマイナビクリエイターをお勧めします。【未経験者にもおすすめ】私はマイナビ派遣で1ヶ月で正社員になりました。