DESIGN DIRECTION

ホームページ
デザイン方向性のご提案

focus合同会社 御中

(01) — この資料について

今回、見ていただきたいこと。

ホームページのデザインの方向性を、2案つくりました。下のリンクから、実際に動く状態でご覧いただけます。スマートフォンでもパソコンでも開けます。

まだ写真・映像・文言は仮置きです。今の段階で判断していただきたいのは、色や動きや全体の空気感が、focusさんのイメージに合っているかどうか、という一点です。細かい文言は、方向が決まってから詰めていきます。

ゆっくり下にスクロールしてご覧ください。スクロールに合わせて動くようにつくってあるので、一気に下まで飛ばすと本来の見え方になりません。

(02) — 2つの案

文字で見せるか、街の写真で見せるか。

どちらも同じ構成・同じ配色です。違うのは、写真をどれだけ使うかだけです。

PLAN A

シンプル

写真はページ全体で代表の1枚だけ。文字の大きさと余白、面の色の移ろいだけで組んでいます。落ち着きと、余計なものを足さない姿勢が出ます。表示も速い。

A案を見る → PLAN B

長崎

冒頭に映像、中盤に街の一枚、最後に港の一枚。地元に根を張っている感じは、こちらのほうがはっきり出ます。ただし写真の質がそのまま印象を左右します。

B案を見る →
現在B案に入っている写真・映像は、すべてInstagramのリールから切り出した仮のものです。拡大しているぶん粗く見えます。実際の写真が入れば印象は変わりますので、画質ではなく方向のほうをご覧ください。

(03) — ページの構成

上から下へ、7つの章。

  1. 01focusとはむずかしいAIを、現場でそのまま使える形に翻訳する
  2. 02なぜfocusをやるのか長崎の現状。ページの背骨にあたる章
  3. 03支え方SNS → 集客 → AI → 補助金 のつながりを図で
  4. 04提供サービス発信・開発・制作の3つを、1画面ずつ
  5. 05代表の想い16歳で中退して、19歳でfocusをつくりました
  6. 06お問い合わせ相談の入口を「発信から」「AIから」の2つに
  7. 07会社概要設立・所在地・事業内容

章の合間に、焦点が合う演出と、白い画面に一行だけ置く場面を挟んでいます。社名の「focus」＝ピントが合う、という意味を動きで表しています。

(04) — 決めていただきたいこと

この3つだけ、お願いします。

  1. 01A案とB案、どちらの方向で進めるか迷われる場合は、両方の良いところを合わせることもできます
  2. 02全体の空気感は、focusさんのイメージに合っているか合わない場合、どのあたりが違うかだけ教えてください
  3. 03動きの量は、多いか・少ないか・ちょうどいいか増やすことも、静かにすることもできます

(05) — 現在、仮置きのもの

公開前に、こちらを確定させます。

料金はサイトに掲載しない方針で組んでいます。すべて「まずは無料相談」への導線に集約し、金額は個別にご案内する形です。あわせて、効果や成果を断定・保証する表現も使っていません。

(06) — 次にお願いしたいこと

写真を、撮っていただきたい。

今いちばん足りていないのが素材です。AIは形がないので撮るものがない、と思われがちですが、focusさんが撮るべき被写体はAIではなくお客さんの現場と実際に動いている画面です。そこは全部、形があります。

特に、見積AIや集客AIが動いている画面の収録は、今日にでも撮れて許可もいりません。これが実質的な製品写真になります。もう一つは代表のポートレート。今のLPで唯一の写真枠なので、ここの質がページ全体の質になります。

この2つが揃えば、ホームページとして十分に成立します。撮影リストは別途お渡しします。スマートフォンで撮れる範囲でまとめてあります。