ＷＥＢデザイナー社長による「制作会社の手法公開！」まとめ

岡本純平@WEBデザイナー社長 @Okamoto_Lexa

【制作会社の手法公開しちゃいます/準備編】 お仕事を受けていきなりデザイン制作することはなく、レクサではお仕事を受けた後なにをしているかを公開します。 〜受注契約後〜 ----- 01.社内キックオフミーティング -----  ご契約前のお打ち合わせにてヒアリングさせていただいた内容（事業内容、課題と目的、納期など）を中心に、プロジェクトの概要を全スタッフに共有します。 また制作を担当するチームのメンバーを決定します。制作内容にもよりますが、ディレクター・デザイナー・ライター・エンジニアの4職種が各1名ずつ割り当てられるのが一般的です。 【POINT】ーーー プロジェクトの担当となったメンバーはもちろん、担当外のスタッフも含め全員がプロジェクトの概要や進捗を把握できるよう、こまめな情報共有を心がけています。 レクサでは複数のプロジェクトが同時に進行しているケースも多く、制作を取り巻く状況が日を追うごとに変わっていきます。 情報共有を密に行うことで、そのときの状況に応じて適切に業務の管理を行い、目的に向かって効率よく制作を進めることができるようになります。 ーーー ----- 02.制作環境の準備（figma） ----- レクサでは工程ごとの制作物や各種資料を、figmaというデザインソフトで作成しています。プロジェクトごとに専用のファイルを作成し、その後の制作を進めていきます。 制作物や各種資料には基本のテンプレートを用意しており、プロジェクトの内容に応じて柔軟にカスタマイズします。これにより制作の効率と完成度を高めています。 ーーー ----- 03.進行管理表の作成（WBS作成） ----- WEBサイト全体を細かな工程に分解し、タスクやスケジュールを把握するために必要なものがWBS（Work Breakdown Structure）です。 レクサではNotionという管理ツールを用いてWBSを作成し、制作の進行管理や品質管理を行なっています。 ----- 04.ファイル共有環境の準備（Dropbox） -----  ホームページの完成までの過程では、各工程の制作物や資料など、多数のデータをお送りいたします。ファイル容量を気にせずやりとりができるよう、オンライン上に専用の共有フォルダをご用意いたします。 ----- 05.初回お打ち合わせ -----  ご契約前のお打ち合わせにてヒアリングさせていただいた内容をもとに、さらに踏み込んだお話をさせていただくためのお打ち合わせです。お客様の事業の現状をふまえ、「誰に向けて」「何を目的とした」WEBサイトを作るかという基本方針を決定します。 またWEBサイト制作全体の流れやスケジュールの目安、お客さまとレクサそれぞれが対応する作業の範囲などについても、認識のズレが無いよう共有させていただきます。 さらに目的達成に向けて必要なWEBサイトの機能やコンテンツについても検討し、その後の「サイトマップ制作」以降の工程に繋げていきます。 ーーーーーー まとめ ここまでの準備が甘いと、納品に近くなればなるほどお客さまとの認識の相違が出やすくなります。つまり、トラブルが起きやすくなってしまいます。 社内外問わず、しっかり確認事項を抑えてから制作を進めましょう！ 反応が良ければ納品まで全部無料で出します！

岡本純平@WEBデザイナー社長 @Okamoto_Lexa

【制作会社の手法公開しちゃいます/サイトマップ編】 前回に引き続き弊社のWEB制作ノウハウを公開させていただきます。よかったらブックマークして、参考にしてみてください。 前回の準備編では、WEB制作会社は、お仕事を受注したあとに何をしているかを具体的に公開させていただきました。今回はその続きです。 準備が終わっても、すぐにデザインをすることはありません。準備のあとは設計を考えます。市場調査の結果をもとにサイトマップ案を制作して、ご提案をしていきます。 まずは概要から説明していきます。 ========== サイトマップ制作の概要 ========== プロジェクト設計で定めたWEBサイトのゴールをもとに、全体の設計図となるサイトマップを制作します。ページ数や、各ページの大まかな内容もこの工程で決定します。 サイトマップを作るとWEBサイトの全体像を一目で理解できるようになります。お客さまとレクサで認識の共有ができ、目的に沿って正しく制作を進めやすくなります。またわかりやすく魅力的なWEBサイトの完成につながり、効果も出やすくなります。 【サイトマップ作成の担当職種】 ・ディレクター ・デザイナー レクサではディレクターとデザイナーが担当します。またサイトマップ制作には10項目*のチェック基準を設けており、2人以上で確認・改善をしたうえでお客様にご提案しています。（*2023年1月現在） 【使用ツール】 ・figma ・Notion レクサではfigmaというデザインソフトでサイトマップを制作しています。またNotionという管理ツールを用いて、進行管理や品質管理などを行っています。 【制作期間の目安】 合計2〜3週間 レクサでのサイトマップ案作成には、1〜2週間ほどお時間をいただいております。さらにご提案の後1週間を目安に、お客様のご確認と内容のすり合わせを行います。（上記の期間はあくまで目安です。お打ち合わせの日程や制作内容によって前後します。） -------- サイトマップ制作のポイント -------- WEBサイト制作では「どんな文章を載せるか」や「何色のデザインにするか」に目を向けられやすく、サイトマップの必要性に疑問を感じる方もいらっしゃるかもしれません。 しかしサイトマップを作っておくことで情報が整理され、ユーザーにとってわかりやすく使い勝手のいいWEBサイトになります。 レクサではお客様の課題解決のため、利便性の高いWEBサイト制作を心がけています。 ｜POINT.01 ｜認識の共有 サイトマップを制作することにより、お客様とレクサの間で認識を共有することができます。認識にズレがあると後の工程で追加訂正などのトラブルが起きやすいため、それを防ぐのが目的です。 ｜POINT.02 ｜コンテンツの整理 WEBサイトに掲載される数多くのコンテンツを整理するために必要なのがサイトマップです。整理されていて必要な情報がすぐに見つかるWEBサイトは、ユーザーにとってわかりやすく使い勝手が良くなります。 ｜POINT.03 ｜ユーザーの利便性向上 レクサではユーザーの利便性のためにサイトマップを制作しています。利便性の高いWEBサイトほど魅力が伝わりやすく、最終的にはお客様の課題解決や目的達成につながります。 ======== サイトマップ制作の進め方 ======== 上記の手順でサイトマップ制作を進めます。 ・リサーチ・コンテンツ立案 ・サイト構造の設計 ・サイトマップ案の作成 ・社内ミーティング ・改善ご提案 ・お打ち合わせすり合わせ ・確定 ひとつずつ詳しく解説します。 ========== レクサのサイトマップ制作の手法 ========== 【手順１：リサーチ・コンテンツ立案】 サイトマップ制作を始めるにあたり、まず最初に市場調査を行います。いきなりサイトマップそのものを作るのではなく、中身となるコンテンツの候補をリストアップする工程です。 同業他社サイトを中心にリサーチし、掲載するコンテンツの候補を洗い出します。具体的には次のようなことを行っています。 ・同業他社サイトのリサーチ ・異業種他社サイトのリサーチ さらに詳しく解説していきます。 ｜既存サイト、資料等のリサーチ ｜同業他社サイトのリサーチ お客さまの方で参考にされている同業他社のWEBサイトがありましたら、まずはそちらを隅々まで調べさせていただきます。またレクサでも複数のサイトをピックアップし、同様に調べていきます。 ｜POINT 業界的に欠かすことのできないコンテンツの掲載漏れを防ぐことが主な目的です。またユーザーがお客さまの商品やサービスを検討する際に、他社との比較がしやすくなるというメリットもあります。 ｜異業種サイトのリサーチ 同業種だけでなく、ある程度近い業種や業態のWEBサイトまで対象を広げてリサーチする工程です。例えばECサイトを制作する場合は、同じような商品を扱っているECサイトだけでなく、少し違った商品を扱う、ターゲット層の近いECサイトなどもリサーチします。 ｜POINT 同業他社ばかり見ていると似たようなコンテンツが増え、差別化が難しくなってしまう恐れがあるため注意が必要です。異業種のWebサイトにも目を向けることで、新たな切り口のコンテンツを見つけることができます。 【手順２：サイト構造の設計】 リサーチで挙がったコンテンツの候補をもとに、WEBサイト全体のおおまかな構造を設計します。具体的には次のようなことを行っています。 ・コンテンツ候補の精査 ・ページ構成 ・動線の設計 ・コンテンツ候補の精査 候補となったコンテンツを実際に掲載するか精査する工程です。WEBサイト制作の目的・設定しているゴール・お客さまの事業の詳細をふまえて選択していきます。 ｜POINT 他社サイトや自社の既存サイトに掲載されているコンテンツが、制作中のWEBサイトでも同じように必要とは限りません。本当に必要なものかどうか、目的やゴールに基づいて検討します。 またお客さまの事業の都合上、掲載したくても実現が難しい場合もあります。事業の詳細をふまえてお客さまと相談させていただきながら、掲載の可否を決定します。 【手順３｜ページ構成・動線の設計】 情報を整理し、どのページに何を掲載するのかを決める工程です。またユーザーがスムーズに目的の情報にたどり着けるような構成や動線作りを行います。 ｜POINT 購入やお問い合わせといった目的の行動をユーザーに取ってもらう第一歩として、WEBサイト自体のわかりやすさは欠かせません。お客さまの商品やサービスにいくら魅力があっても、情報がきちんと整理されていなければ伝わらないためです。せっかくWEBサイトを制作するのですから、魅力を伝えて効果を出せるものにするべきです。そのためにユーザーが迷うことのない、シンプルでわかりやすい設計を心がけています。 【手順４：サイトマップ案の作成】 大まかな構造が定まった状態から、WEBサイト全体の仕様をさらに詳しく決定します。ここまでの決定事項をわかりやすく図にまとめたものが、お客さまにご確認いただくサイトマップ案です。 こんな感じで制作しています。 具体的には、主に以下のようなポイントがまとめられています。 ・各ページのテーマやタイトル、コンテンツ ・ページ間の動線 ・お客さまご自身で更新が可能な、ブログ機能を利用する箇所 ・全ページ共通で表示させるナビゲーション（基本情報やサイト内のメニューなどをまとめたもの）の内容 【手順５：社内ミーティング・改善】 担当のディレクターとデザイナーが制作したサイトマップ案を社内で共有する工程です。複数人でチェックをして出し合った意見をもとに改善を行います。納得のいくものができあがるまで、妥協せずにチェックと改善を何度も繰り返します。 ｜POINT 経験を積んだプロでも、欠点のない完璧なものを一発で、ひとりの力で作り上げることは不可能です。ディレクターとデザイナーが形にした案の課題をさまざまな視点から見つけ、それに対して改善をする。これを繰り返すことでサイトマップをより洗練させていきます。 【手順６：ご提案・お打ち合わせ】 出来上がったサイトマップ案をお客さまにご提案させていただきます。お打ち合わせの場を設けて、レクサのスタッフからサイトマップ案についてご説明させていただくのが一般的です。さらなる改善点を見つけるため、お客さまが感じたご意見やご感想をぜひ率直にお聞かせください。 またお打ち合わせでの協議事項をまとめた議事録と制作したサイトマップ案を、お打ち合わせ後にクラウド（Dropbox）上で共有いたします。いつでもお好きな時にご確認いただけます。 【手順７：すり合わせ・確定】 サイトマップ案をご確認いただいたうえで修正のご希望があれば、すり合わせを行います。お客さまとレクサ双方が納得できたところでサイトマップを確定とし、次の「ワイヤーフレーム制作」の工程に進みます。 ＝＝＝＝＝＝＝＝＝＝＝ 【まとめ】 サイトマップがうまく作成できていない場合、制作の後半段階でページ構成の変更案が出てしまったりする原因になってしまいやすいです。なるべくこの段階でしっかりとしたサイトマップ案を企画しておきたいところです。 めっちゃ長いのに読んでいただいてありがとうございました。皆様の制作にお役立ていただけたら嬉しいです。もし好評でしたら他の工程の解説も無料で出しますので、なにかリアクションいただけると嬉しいです。【制作会社の手法公開しちゃいます/準備編】

拡大

拡大

拡大

拡大

岡本純平@WEBデザイナー社長 @Okamoto_Lexa

【制作会社の手法公開しちゃいます / ワイヤーフレーム編】 前回はサイトマップ制作のお話でした。今回はワイヤーフレーム編です。よかったらあとで見られるようにブックマークしておくと便利かもしれません。 今回はさらに、弊社が実際に使用している提案資料のページ構成まで言及して、ご紹介しています。これから資料をつくろうと思われている方は、ぜひご参考になさってください。 それでは詳しく解説していきます。 ======= ワイヤーフレーム制作の概要 ======= サイトマップで決定したWEBサイト全体の構造をもとに、各ページ内の構造を詳しくまとめたものがワイヤーフレームです。インタビューでお客様の事業についてより詳しく伺い、SEOに配慮した文章も作成します。 サイトマップよりもWEBサイトらしい見た目に近づきますが、ここでは情報の伝わりやすさを追求するため、見た目のデザイン要素を一切含めずに制作しています。 【担当職種】 ・ディレクター ・デザイナー ・ライター インタビューと原稿作成はディレクターとライターが、その他の工程はディレクターとデザイナーが担当します。またワイヤーフレーム制作には34項目の品質チェック基準を設けており、3人以上で確認・改善をしたうえでお客様にご提案しています。 【使用ツール】 figma Notion レクサではfigmaというデザインソフトでワイヤーフレームを制作しています。またNotionという管理ツールを用いて、進行管理や品質管理などを行っています。 【制作期間の目安】 合計3〜4週間 レクサでのワイヤーフレーム案作成には、2〜3週間ほどお時間をいただいております。さらにご提案の後1週間を目安に、お客様のご確認と内容のすり合わせを行います。 （上記の期間はあくまで目安です。案件によって変わります。） ーーーーーー 【ワイヤーフレーム制作のポイント】 もしかしたら 「デザインも一緒に作ってしまえば早く完成するのでは？」 「デザインを先に作って、そこに文章を当てはめれば楽なのでは？」 と思われるかもしれません。しかしデザインが先行すると、WEBサイト本来の目的や、情報の伝え方に対する意識が曖昧になりやすくなってしまい、デザインありきの情報設計になってしまう恐れがあります。 文字だけでもわかりやすく、またユーザーに与えたい印象が正しく伝わるよう設計し、WEBサイトの土台をしっかり作り込むためにはとても大切な工程です。 ｜POINT.01　認識の共有 ワイヤーフレームで情報の見せ方や文章の内容などについてお客様とレクサで認識を共有し、その後の工程でのトラブルを防ぎます。 ｜POINT.02　情報の整理 ページ内の構造を明確にすることで、目的に沿って制作を進められているかが一目でわかります。文字だけでもユーザーにわかりやすいように設計されていることは、効果的なWEBサイトを作るうえで重要なポイントです。 ※もちろん例外はあります。 ｜POINT.03　魅力がつたわる文章 商品・サービスの個性や魅力は、デザインだけでなく文章からもアピールすることができます。インタビューで伺ったお客様の思いを文章で表現し、WEBサイトで伝えたいことをより伝わりやすくします。 ｜POINT.04　SEO対策 WEBサイト制作をするにあたり、検索順位を意識される方も多いはず。キーワードの選定など、ワイヤーフレーム制作の段階でSEOを意識した設計をしています。 ーーーーー ======= ワイヤーフレーム制作の流れ ======= 基本的にはこういった流れで進めていきます。 ======= レクサのワイヤーフレーム制作の具体的な手法の解説 ======= 【手順１：画面構成の設計】 前の工程で制作したサイトマップをもとに、各ページのどこにどんな情報が並ぶかという構成を下書きする工程です。ヒアリング内容や参考となるサイト・資料などから得られる情報を大まかに配置していきます。 制作開始時の設計段階で決めたターゲットや目的に沿って、わかりやすいWEBサイトになるよう情報を整理します。情報が整理されると、掲載したい情報が十分揃っている箇所と不足している箇所が出てくるはずです。必要な情報をインタビューなどで漏れなく集めるため、追加で情報が必要な箇所をこの段階で明確にしておきます。 ｜POINT ページの構成や必要な情報を明確にしておくことで、内容がより充実してわかりやすいWEBサイトを作ることができます。 商品やサービスの魅力を狙ったところに届けられるような、訴求力の高いサイトを作るために大変重要な工程です。設計段階で決めたターゲットや目的からズレたサイトにならないよう、常に意識をしながら制作していきます。 【手順２：インタビュー準備】 魅力的なサイトを制作するために詳しくお話を伺いたいポイントを洗い出し、質問事項を準備します。また質問事項の共有や日程調整のための連絡を事前にさせていただきます。 ｜POINT 貴重なお時間をいただいてインタビューにご協力いただく以上、1回の限られた時間の中で多くのお話を伺えるよう準備を徹底しています。なるべく本音を伺った上で温度感のあるクリエイティブを提供したいと思っているので、リラックスした状態で楽しくお話を伺えるような環境づくりを心がけています。 【手順３：インタビュー】 事前に共有した質問事項を中心にインタビューさせていただき、お客様の思いを伺います。リラックスした雰囲気の中で様々なお話を伺い、ご自身でも気づいていないような魅力やお客様の思いを引き出せるよう、突っ込んだお話もさせていただきます。 ｜POINT お客様ご自身でも気づいていないような魅力や本音をお伺いするために、一問一答のような形式ばったインタビューにならないよう心がけています。 話の広がりや深掘りを意識しながらお話を伺っていくことで、お客様の中ある思いがけない素敵な言葉や考え方を拾うことができ、より説得力のある魅力的なサイトに仕上がります。 【手順４：原稿のコンセプト設計】 インタビューで伺ったお話をもとに、WEBサイトに掲載する原稿を作成します。実際に文字におこす前に、文章のコンセプトを設計しておきます。またSEO対策の一環としてキーワードの設定も行います。 この工程でもWEBサイトのターゲットと目的を意識して、「文章を読んだユーザーにどんな印象を与えたいか」「どんな文章なら伝えたいことが伝わるのか」という視点でコンセプトを決定します。 ｜POINT あらかじめコンセプトを設計しておくことで、WEBサイト全体を通して文章が与える印象に統一感が生まれます。統一感のある読みやすい文章を作成し、個性を表現するように意識してライティングを行います。 【手順５：原稿作成】 事前にいただいた情報やインタビュー内容をもとに、設計したコンセプトに沿って原稿を作成する工程です。読みやすさを第一に考え、そのうえでユーザーに魅力や個性が伝わるような文章にしていきます。 ここでは本文とあわせて、WEBサイトのキャッチコピーや段落の見出しなども決定します。案件の目的に合わせて、ユーザーがWEBサイトの中身をもっと詳しく見たくなるような、心を掴む魅力的な言葉選びを心がけています。 ｜POINT 言葉の与える印象はとても影響が大きく、WEBサイトの個性を決める重要な要素です。サイトのターゲットや目的に基づいて設計したコンセプトに沿って文章を作成することで、ユーザーに寄り添った訴求力の高いサイトになります。 【手順６：ワイヤーフレーム案の作成】 作成した原稿をはじめとするテキスト情報、掲載したい写真や図なども作成して配置します。ここで配置される内容はWEBサイトにそのまま掲載されるため、内容に漏れや誤りがないようにします。 また全体を通して情報設計や文章の伝わりやすさを改めて確認し、ユーザーに優しいWEBサイトになるようワイヤーフレームを仕上げます。 【手順７：社内ミーティング・改善】 担当のディレクター・ライター・デザイナーが制作したワイヤーフレーム案を社内で共有する工程です。 「ユーザーにとってやさしい（伝わりやすい）サイトか？」 「載っている情報から魅力が伝わるか？」 という視点で複数人でチェックをして出し合った意見をもとに改善を行います。お客様の魅力をきちんとユーザーにお届けできるようチェックと改善を何度も繰り返します。 ｜POINT 経験を積んだプロでも、完成させるまでには試行錯誤が必要です。複数人でチェックすることでさまざまな視点から課題を見つけて改善し、ワイヤーフレームをさらに洗練されたものに仕上げます。 【手順８：ご提案・お打ち合わせ】 出来上がったワイヤーフレーム案をお客さまにご提案させていただきます。お打ち合わせの場を設けて、レクサのスタッフからワイヤーフレーム案についてご説明させていただくのが一般的です。 提案資料は ・ワイヤーフレーム さらなる改善点を見つけるため、お客さまが感じたご意見やご感想をしっかりとヒアリングしていきます。 またお打ち合わせでの協議事項をまとめた議事録と制作したワイヤーフレーム案を、お打ち合わせ後にクラウド（Dropbox）上で共有いたします。いつでもお好きな時にご覧いただけますので必要に応じてご確認ください。 【手順９：すり合わせ・確定】 ワイヤーフレーム案をご確認いただいたうえで修正のご希望があれば、すり合わせを行います。お客さまとレクサ双方が納得できたところでワイヤーフレームを確定とし、次の「デザイン制作」の工程に進みます。 ＝＝＝＝＝＝＝＝＝＝＝ 【まとめ】 ワイヤーフレームまで作成できれば、あとの工程はほとんどレクサがやることになるのでちょっとだけ一安心といったところです。 ワイヤーフレームがしっかり完成していれば、デザインで困ることは経験上、あまり多くはありません。逆に、ワイヤーフレームのつくりが甘いと大きな差し戻しや修正が増えるような気がします。 【おまけ】 とても長い解説になってしまいましたがご覧いただきましてありがとうございました。もし好評でしたら、次はいよいよデザイン制作の工程の解説も出したいと思います。 最後までお読みいただいた方は、なにかリアクションいただけたりリポストや拡散していただけると嬉しいです。 また、前回（サイトマップ編）と前々回（準備編）の反響が大きくてとても驚いています。もちろんご紹介している手法は、完璧なものとはとてもいえないですが、ぼくたちなりに顧客を勝たせたい一心でブラッシュアップし続けたワークフローとなっています。 皆さんのクリエイティブにほんの少しでもお役立ていただけたらとても嬉しいです。

拡大

拡大

拡大

拡大

岡本純平@WEBデザイナー社長 @Okamoto_Lexa

追記：提案資料の構成について 01.全体の流れと成果物イメージ（全体のおさらい） 02.スケジュール目安（最新のスケジュール進捗表） 03.ワイヤーフレームとは（ワイヤーフレームの説明） 04.コンテンツ企画案｜ユーザーに伝えたいポイント 05.ライティングコンセプトシート 06.SEO戦略シート 07.実際のワイヤーフレーム案の添付 こんな構成となっています。

岡本純平@WEBデザイナー社長 @Okamoto_Lexa

【制作会社の手法を公開しちゃいます / デザイン編】 前回はワイヤーフレームのお話でした。今回は、デザイン制作編を解説していきます。あとからでも見られるようにブックマークしておくと便利かもしれません。 それでは詳しく解説していきます。 ===== デザイン制作の概要 ===== ワイヤーフレームまでの工程で決定した構造や文章にビジュアルや動きの要素を加え、実際のWEBサイトでの見せ方をデザインしていきます。デザイナーが担当する工程です。 ユーザーに向けてどんな印象を与えたいかをもとにコンセプトから設計します。見た目の美しさだけでなく使いやすさも追求し、文字・色づかい・レイアウト・装飾など細かいところまでこだわってデザインを作り上げています。 【担当職種】 デザイナー 主にデザイナーが担当します。またデザイン制作には約30項目程度の品質チェック基準を設けており、3人以上で客観的に確認し、改善をしたうえでお客様にご提案しています。 【使用ツール】 figma Notion レクサではfigmaというデザインソフトで制作をしています。またNotionという管理ツールを用いて、進行管理や品質管理をしています。 【制作期間の目安】 合計3〜4週間 レクサでのデザイン案作成には、2〜3週間ほどお時間をいただいております。さらにご提案の後1週間を目安に、お客様のご確認と内容のすり合わせを行います。 （上記の期間はあくまで目安です。お打ち合わせの日程や制作内容によって前後します。） 【レクサが考える「いいデザイン」とは】 制作会社にWEBサイト制作を依頼するなら、とにかくおしゃれな見た目のデザインがいいと思われる方も多いのではないでしょうか。しかし、お客様の役に立つWEBサイトのためには、それだけでは不十分だと考えています。 レクサは見た目だけでなく、伝わりやすく心に残るデザインこそが「いいデザイン」であると考えています。お客様の課題解決や目的達成のための手段として、「いいデザイン」を提供できるよう日々の制作に取り組んでいます。 ｜「いいデザイン」の定義について ｜POINT.01　見た目としてのデザイン デザインと聞いて、誰もが真っ先に思い浮かべるポイントではないでしょうか。「かっこいい」「かわいい」など、ユーザーに与えたい印象を視覚的に伝えてアピールします。 ｜POINT.02　伝わるデザイン いくら見た目が美しくてもユーザーが迷ってしまうようなWEBサイトでは、せっかくの魅力が伝わりません。ストレスなく使えるWEBサイトになるよう、細かいところまで論理的な設計が必要です。 ｜POINT.03　心に残るデザイン 本当の意味でお客様の事業に貢献できるのは、ユーザーの心に残り、興味を惹くようなWEBサイトです。ユーザーの目線を第一に考え、素敵な体験を提供できるようなデザインを作ります。 ===== デザイン制作の流れ ===== ｜01.デザインコンセプトの設計 ｜02.トップページのデザイン案作成 ｜03.社内ミーティング・改善 ｜04.下層ページのデザイン案作成 ｜05.社内ミーティング・改善 ｜06.モーションデザイン ｜07.ご提案・お打ち合わせ ｜08.すり合わせ・確定 ｜09.エンジニアへ引き継ぎ ⇩ 上記の手順でデザインを制作しています。 それではひとつずつ詳しく解説していきます。 ===== デザイン制作の手法 ===== 【手順１：デザインコンセプトの設計】 実際にデザイン案の制作を始める前に、まず行うのがデザインコンセプトの設計です。 「ユーザーに向けてお客様の商品・サービスの魅力をどのようにアピールするか」 「デザインを通してユーザーにどんな印象を持ってもらいたいか」 を言語化し、コンセプトシートを作成します。また、配色・フォント（文字）・モチーフなどのように具体的なポイントもあらかじめ決めておきます。 ｜POINT デザインの方向性の決定と、この後の工程でアピールしたいポイントを的確に表現するための土台作りが目的です。コンセプトやポイントをあらかじめ決めておくことでデザインに統一感を出し、仕上がりの完成度を高めています。 【手順２：トップページのデザイン案作成】 コンセプトが決定したら実際にデザインの制作に移ります。WEBサイト全体の個性が表れやすいトップページから取り掛かるのが一般的です。 またいきなりページ全体をデザインするのではなく、部分的にデザインした時点で担当ディレクターや担当外のデザイナーと議論の場を設けています。議論と改善を何度か繰り返し、方向性のすり合わせができたら全体を仕上げます。 ｜POINT デザイン制作序盤のこの段階では、他メンバーとの議論と改善をこまめに行っています。コンセプトをあらかじめ決めているとはいえ、デザインの工程はWEB制作の中でも最も自由度が高く、方向性のすり合わせが特に重要となるためです。 この段階では、形をつくっていきながら、コンセプト自体が正しいかどうかも検証します。場合によってはコンセプトが変更になる場合もよくあります。 また、顧客からのデザインに対する要望の具体性が低い場合は、混乱を招く恐れがあるため、顧客には共有せずにそのまま次の工程に進みます。 あるいは「顧客と方向性のすり合わせが必要」とディレクターが判断した場合はここで一度打ち合わせを設定し、デザインの方向性のすり合わせを行います。 【手順３：社内ミーティング・改善】 トップページ全体のデザインが仕上がったら、改めて複数人でチェックを行います。見た目の美しさだけでなく「わかりやすく魅力が伝わるか？」「ユーザーの心に残るか？」という視点で意見を出し合い、納得のいくデザインができあがるまで改善を繰り返します。 ｜POINT 経験を積んだプロでも、デザインを完成させるまでには試行錯誤が必要です。複数人でチェックすることでさまざまな視点から課題を見つけて改善し、さらに洗練された機能的なデザインに仕上げます。 【手順４：下層ページのデザイン案作成】 トップページのデザインが固まったところで、下層ページの制作に移ります。WEBサイト全体で統一感が出るよう、あらかじめ決めておいたコンセプトや、トップページの方向性を取り入れるのがポイントです。トップページ同様、議論と改善を繰り返しながら制作します。 また現代はWEBサイトを見る端末が多岐にわたります。幅広い画面サイズに対応できる柔軟なデザイン（レスポンシブデザイン）の作成も標準で行います。 【手順５：社内ミーティング・改善】 サイト全体のデザインを最終チェックする工程です。ここまでの段階で既に議論と改善を何度も行っていますが、最後まで妥協せず改善点を探してデザインの完成度を高めます。 【手順６：モーションデザイン】 「モーション＝動き」をデザインする工程です。アニメーションを付けて表示したり、ページのスクロールやマウスの動作に合わせた動きを付けたりします。 参考サイトを提示したり、簡単な動きであればデザインソフト（figma）上で作成するなどの方法で、動きのイメージを形にします。 ｜POINT 適切に動きを付けるとユーザーに心地よい操作感を与えたり、印象を高めるといったメリットが期待できます。しかし適切に利用しなければかえって使いづらくなってしまったり、WEBサイトの動作が重くなってしまう恐れがあるため注意が必要です。 レクサでは印象の良さ、使いやすさ、動作の軽さすべてに配慮してモーションデザインの方針を決定しています。 【手順７：ご提案・お打ち合わせ】 出来上がったデザイン案をお客さまにご提案させていただきます。お打ち合わせの場を設けて、レクサのディレクターからデザイン案についてご説明させていただくのが一般的です。さらなる改善点を見つけるため、お客さまが感じたご意見やご感想をぜひ率直にお聞かせください。 またお打ち合わせでの協議事項をまとめた議事録と制作したデザイン案を、お打ち合わせ後にクラウド（Dropbox）上で共有いたします。いつでもお好きな時にご覧いただけるように配慮をしています。 【手順８：すり合わせ・確定】 デザイン案をご確認いただいたうえで修正のご希望があれば、すり合わせを行います。お客さまとレクサ双方が納得できたところでデザインを確定とし、次の「デモサイト構築」の工程に進みます。 【手順９：エンジニアへ引き継ぎ】 デザイン制作までの工程はデザイナーが中心となって進めてきましたが、次のデモサイト構築からはエンジニアが中心となります。 ここではデザインのポイントや実装時の注意点などを、デザイナーからエンジニアへ引き継ぎます。 ｜POINT デザイナーは詳細な仕様を想定しながら、細かいところまで意図をもってデザインを制作しています。適切に引き継ぎを行ってエンジニアが正しい認識を持つことで、実装時にデザインの良さをもれなく再現できるようになります。 ＝＝＝＝＝＝＝＝＝＝＝ 【まとめ：デザイン制作のコツ】 ぼくがデザインをどういう考え方で作っているのかを、最後にご紹介させていただきます。 まず考えることは、どうやっておしゃれにしようか、というような意匠性や表現方法ではありません。もちろん見た目の要素も大切なのですが、以下の３つの視点でデザインをバランスよく評価するようにしています。 ・UI Design：それはわかりやすいのか？ ・UX Design：それは嫌な思いをさせないか？ ・Visual Disign：それは「らしさ」が表現できているか？ これらの視点それぞれで、デザインを改善し続けることが大切だと考えています。簡単に言うと、３つの視点それぞれで３回見直すようにしています。 この３つの視点でデザインを評価し自問自答することによって、少しずつ事業で狙った成果を出すようなデザインをつくれるようになってきました。 ーーーーー とても長いのにご覧いただきましてありがとうございました。皆様の制作にお役立ていただけたら嬉しいです。もし好評でしたら残りの工程の解説も無料で出しますので、なにかリアクションいただけると嬉しいです。

拡大

拡大

拡大

拡大

岡本純平@WEBデザイナー社長 @Okamoto_Lexa

【制作会社の手法を公開しちゃいます / デモサイト構築編】 弊社で実際に使っているWEB制作ノウハウを公開させていただきます。ご覧いただいて、もし参考になったらブックマークしてみると便利かもしれません。 今回はデザイン編の続きです。… twitter.com/i/web/status/1… pic.twitter.com/ThVJQSDmlc

拡大

拡大

拡大

拡大

岡本純平@WEBデザイナー社長 @Okamoto_Lexa

【制作会社の手法を公開しちゃいます / 公開作業編】 弊社で実際に使っているWEB制作ノウハウを公開させていただきます。クリエイターの皆さんの参考になれば幸いです。 デモサイト構築編の続きとなります。今回の公開作業編で今回のシリーズは完結となります。 それでは概要から詳しく解説していきます。 ===== 公開作業の概要 ===== デモサイトが確定したら次はいよいよ公開のための作業です。あらかじめ公開日を設定させていただき、計画的に作業を行います。 とくにリニューアルの場合は既存サイトからの移行やメール設定など、不具合を起こさないために注意すべきポイントが数多くあります。お客様やユーザーにご不便をおかけすることが無いよう、現状を詳しくお伺いしたうえで適切に対応するようにします。 【担当職種】 ・ディレクター ・エンジニア 公開作業前後のご案内をディレクターが行い、実際の公開作業は担当エンジニアが行います。 【使用ツール】 Notion レクサではNotionという管理ツールを用いて進行管理をしています。 【制作期間の目安】 1週間 あらかじめ公開作業の計画を立てておき、公開日前日までに保守契約開始のご案内をします。 公開設定開始から完了までは1〜2日ほどお時間をいただきます。 （上記の期間はあくまで目安です。制作内容によって前後します。） ===== 公開作業の流れ ===== ｜01.公開作業の計画 ｜02.公開のご案内 ｜03.公開設定 ｜04.公開後の動作チェック ｜05.解析ツールの設定 ｜06.公開設定 ーーー サイト公開後 ーーー ｜07.無料コンサルティングの実施 この流れで公開作業を進めてまいります。 ひとつずつ具体的に解説していきます。 ===== 公開作業の手法について ===== 【手順１：公開作業の計画】 公開にあたり必要な作業に漏れが無いよう、タスクを洗い出しておきます。また作業のスケジュールを決定し、お客様に共有します。 お客様ご自身でお持ちのサーバーやドメインをご使用の場合は、お客様に一部の作業をお願いしたり、ログイン情報をご共有いただく場合もあります。 このあたりは業務をマニュアル化することが難しく、案件によってケースバイケースの対応となることがほとんどのため、必ず事前に要件を確認することが重要です。 ｜POINT｜ とくにリニューアルの場合は旧サイトからの切り替えを行うため、サイトが停止する時間が発生したり、旧サイトのURLへのアクセス時にページが表示されなくなったりする可能性があります。 これらの不具合を最小限に抑えられるよう、事前の計画とスケジュールの共有が大切です。 【手順２：公開のご案内】 WEBサイトのログイン情報などに関するご案内を、遅くとも公開日の前日までにお客様にご連絡します。また、制作費用の請求もこのタイミングで行います。 弊社の場合、制作開始前に制作費用の50％を前受金という形でお支払いいただいております。残り50％をこのタイミングでご請求させていただく流れになります。 また、レクサに制作をご依頼いただいたお客様のほとんどに、公開後のサポートプランをご利用いただいています。ご利用のお客様には、サポートプランの内容や費用に関するご案内も併せてご連絡いたします。 ｜POINT｜ 公開前の段階で、さまざまな確認をおこないお客様と認識の相違がないように配慮をしながら進めていきます。具体的には以下のようなことを確認するようにしています。 ・お支払いについて ・今後のサポートについて ・検収期間について ・サポート契約期間について ・CMSの操作マニュアルのご案内 ・アナリティクスのご案内 ・サーチコンソールのご案内 【手順３：公開設定】 すべての準備を済ませたうえで、実際にWEBサイトを公開する工程です。これまで非公開環境で開発や確認をしていたデモサイトのデータを、本番環境に移します。 新規サイトとリニューアルサイトで手順が違うので、それぞれ代表的なケースでの手順を紹介します。 ｜新規サイトの場合｜ 新規サイトの場合は、簡単です。以下の手順で公開する流れになります。 01.ドメイン取得（遅くともデモサイト構築の段階で終わっている） 02.指定のサーバーにWordPressインストール 03.WordPress内にデモサイトのデータをインストール（パスワード保護） 04.公開したいときにパスワード保護を解除 上記の手順で進めることが一般的です。 ｜リニューアルサイトの場合｜ リニューアルの場合はちょっと複雑になるケースが多いです。以下の手順で進めていきます。 01.ドメイン移管手続き（必要に応じて） 02.移転先のサーバーにWordPressインストール 03.インストールしたWordPressに、デモサイトのデータをインストール 04.公開したいときにネームサーバー設定（DNS設定）の変更 上記の手順で進めることが一般的です。移転先のサーバーにWordPressをインストールしても、確認できないという問題が発生しますが、弊社ではhostsファイルを変更する方法で対処します。 【手順４：公開直後の動作チェック】 公開後は、リンク切れや読み込みエラーなど基本的な動作チェックをおこないます。特に、サーバー移転を伴う場合は特に注意しながらチェックを行います。 ｜POINT　移転できているはずなのに・・・？｜ 「移転できているはずなのに、できていない。」 「CMSの設置もDNSの設定も完璧なはずだ。でも移転できていない。」 こんな場合に本当に困ったケースがあったので共有します。 ーーーネットワークキャッシュが残っているーーー わたしたちの場合は、ネットワークのキャッシュが残っていて、地獄を見たことがありました。本当は移転できていたのに、ネットワークのキャッシュが残っていたため、できていないように見えていた、というお話です。 実は、キャッシュはブラウザだけでなくネットワークやサーバーにも残ることがある。ということは覚えておいて損はないかもしれません。 ちなみに対処方法は簡単で、別のWi-Fiに繋いだり、Wi-Fiオフにしたスマホで確認したりするなど、別のネットワークに接続すればネットワークキャッシュを無視することができます。 【手順５：解析ツールの設定】 公開直後の動作チェックが完了したら、各種解析ツールを設定します。レクサでは以下のツールの設定を標準で行なっています。 ・Googleアナリティクス ・Googleサーチコンソール それぞれ解説します。 ｜Googleアナリティクスの設定｜ アクセス解析を行うツールです。専用タグをWEBサイトへ埋め込み、ユーザー数やページビューなど、WEBサイトの反響を知るために必要なデータを取得し、閲覧できるようにします。 ｜Googleサーチコンソール｜ 検索エンジンに関する解析やデータ送信を行うツールです。WEBサイトの情報をもとに生成されるXMLサイトマップのデータを送信することで、常に検索エンジンへ最新データが送信される環境を整備します。またページのエラーやインデックス状況も確認することができます。 【手順６：公開完了】 すべての作業と確認が完了したら、レクサより作業完了のご連絡をします。サポート契約がある場合は、サポートや運用が開始されます。 サポート契約がない場合は1ヶ月程度の検収期間を設けます。（契約時に説明済み） ＝＝＝＝＝ サイト公開後 ＝＝＝＝＝ 【公開後の手順：無料コンサルティングの実施】 公開後、1ヶ月程度で無料のコンサルティングを実施するようにしています。納品後に、なにかお困りごとがないか、お気づきの点などがないかを確認します。 以下のような内容で実施することがほとんどです。 ・お困りごとがないかヒアリング ・1ヶ月分のデータ解析の解説 ・集客などのアドバイス、コンサルティング ・レクサ用の「お客様の声」のインタビュー ・制作の改善点のヒアリング ｜無料コンサルティングの狙い｜ 弊社の事業は慈善事業ではないので、無料で実施するコンサルティングにも狙いがあります。 おもに以下のような狙いがあります。 ・お客さまの満足度の向上（LTVの向上） ・レクサ公式サイトに掲載する「お客様の声」のコンテンツ素材 ・制作の改善点が聞けることがある ・ほとんどの場合で感謝していただけるため、制作側もやりがいが感じられて仕事が楽しくなる。 などのように、メリットばかりなので無料で実施しています。社内のMTGで改善点を共有して、Notionのワークフローを改善するところまでがセットです。 ＝＝＝＝＝＝＝＝ 【まとめ】 すべての工程で誠意と配慮を忘れないことを肝に銘じて業務に取り組んでいます。しかし、完璧にすべてうまくいくことなんてありません。また、弊社にはそんな実力もまだありません。 ただ、足りないことを嘆くのではなく、どうすれば目の前のお客さんを勝たせられるのかを考えて行動する。そういう仕事をしていきたいと思っています。 その方がやってて楽しいし、お客様もそれを望んでいることが多い気がするんですよね。 ＝＝＝＝＝＝＝＝ 【制作会社の手法を公開しちゃいます】シリーズはこれでいったん終わりです。あくまでも弊社の行なっている手法にはなりますが、参考になる部分が少しでもあればぜひご活用いただけると嬉しいです。 ぶっちゃけると「こんな長いの誰が読むん・・・」と投稿する前は思ってたのですが、とてもたくさんの方から反応いただけたり、温かいコメントをいただいたりして、公開してよかったなあと心底思いました。 こんな長いのに最後までご覧いただきましてありがとうございました。今後もいろいろと役立つノウハウや手法を公開していきたいと思います。

拡大

拡大

拡大

拡大