「サバゲー用エアーガン製造会社ホームページ（NFT販売枠必要）」へのinshuuさんの提案一覧
inshuuさんの提案
-
16
-
15
-
14
-
13
-
12
-
11
-
提案日時 2023年10月10日 22:16 -
提案日時 2023年10月10日 22:14メンバーからのコメント
デザイン案③のファーストビュー画像を提出致します。
※提案内容の詳細につきましては一つ目の提案メッセージへ記載しております。 -
提案日時 2023年10月10日 22:14メンバーからのコメント
デザイン案②のページ全体のデザインを提出致します。
※提案内容の詳細につきましては一つ目の提案メッセージへ記載しております。 -
提案日時 2023年10月10日 22:14メンバーからのコメント
デザイン案②のファーストビュー画像を提出致します。
※提案内容の詳細につきましては一つ目の提案メッセージへ記載しております。 -
提案日時 2023年10月10日 22:07メンバーからのコメント
デザイン案①のページ全体のデザインを提出致します。
-
提案日時 2023年10月10日 22:07メンバーからのコメント
コンペに参加させていただきますinshuu(インシュウ)の岡村です。
異なる3パターンのデザインをご提案いたします。
デザイン案①のファーストビュー画像から提出致します。
------------------------------------------------
下記はデザインURLです。
ページ全体のデザインを、コーディングした実際の見えに近い状態でweb上でご確認いただけます。
▼デザイン提出案①
https://inshuu.jp/test/inshuu/crowdworks/231010_01/
▼デザイン提出案②
https://inshuu.jp/test/inshuu/crowdworks/231010_02/
▼デザイン提出案③
https://inshuu.jp/test/inshuu/crowdworks/231010_03/
※コーディングはしていませんのでデザイン画像一枚が表示されている状態です。一般的なノートパソコンで見て等倍の見えとなります。
レスポンシブコーディングによる最適化がされている状態ではございませんのでご了承ください。
------------------------------------------------
ご提案内容のポイントについて
ファーストビューの段階で直帰率はランディングページで70％以上とも言われていることから、ファーストビューを大きく占めるメインビジュアル(ホームページのいちばん上に位置する大きな画像)の作りこみにこだわった制作とご提案をしております。
デザイン全体について
■ロゴや既存の関連ホームページと親和性のある配色(黒×赤をメインに)で制作しました。
■レスポンシブコーディング前提でスマホ用デザインにもしやすいデザインです。
■デザイン内に使用している画像はすべて既存サイト(製品ページ等)から抽出し、実際の製品画像を使用して制作しています。
■添付資料「WEBサイト構成 SYSTEMA社」に準拠した構成で制作しています。
①ファーストビュー
■メインビジュアル(ホームページのいちばん上の画像)は、「製品(エアガン)」と「ターゲットユーザー(エアガンを使用してサバゲーをする人)」で制作しました。人物の画像はユーザーの誰もが自分自身を重ねられるよう、人種・年齢層・性別を断定しない(顔が見えない)画像を使用しました。
それによりファーストビューでいちばん目立たすべきもの＝製品(エアガン)が目立つ効果もあります。
■人物画像はフリー素材を使用しております。
■ナビゲーションはページ内リンクを想定し設置しています。
②Youtube
■複数の動画を設置し、複数の動画がある上でユーザーが見たい動画を再生できるようにしています。モーダルウィンドウ(サムネイルクリックでウィンドウが拡大＆再生)でページ内でも動画視聴可能な実装を想定。
■1つの動画だけをピックアップする場合はデザインを変更いたします。
■ボタンは「その他の動画を見る」というわかりやすいテキストと、チャンネル登録を促すボタンも設置することでチャンネル登録者数の増加も促進しています。
③製品紹介
■https://tokyomove.ocnk.net/product-list/67
上記ページを基(参考)に制作しています。
■まずはどのような製品があるのか、ユーザーが深く興味を持つセクションになるかと思いますので、ひとつひとつをワンカラムで大きく取り、設置しています。
★後に続く販売セクションと同じようなカラム構成にならないようにという理由もあります。そういった全体のバランスも踏まえ、ここのセクションはワンカラムにしています。
■バックに製品(エアガン)の画像を透かしで置いています。LPなので、このようにポイントポイントで見た目に変化を取り入れることでユーザーを飽きさせないデザインにしています。
よりスタイリッシュに見えますので、製品価値を高めることが出来るかと思います。
また、製品紹介箇所で大きな製品画像がバックにあるのは単純にユーザーにとってデザイン上のわかりやすさもあります。
■パララックスの動きを入れるとデザインとの親和性もよく、ユーザーのスクロールを促すことが出来るかと思います。デザインとしてもページ全体がよりスタイリッシュに見え、豪華に見えるかと思います。
■掲載情報は、「タイトル(製品名)」、「製品紹介文タイトル」「製品紹介文」でひとつの製品紹介のブロックとなるようにしています。
■「詳細を見る」で、下記のような詳細ページに飛ぶようにすることも一旦想定してボタンを設置しました。
https://tokyomove.ocnk.net/product/1332
■「すべての製品を見る」というボタンでそのほかの製品紹介ページへ飛ぶこともできるように一旦想定してボタン設置しました。
■現状、一旦あらゆる構成の可能性を加味して制作していますので、詳細につきましては調整させていただきます。
■製品名だけ赤・文字サイをズ20px太字、紹介文タイトルは文字サイズを白・16px太字、紹介文は文字サイズを白・15px、とギャップ率のある作りで情報のまとまりがわかりやすいように工夫しています。
④販売
■10個の販売があるかと思います。ユーザーがそれらすべて(どのような商品が、どれだけ(数)あるのか)を一目で把握できるような構成にしました。
■製品ひとつのブロックが、製品名、価格、希望小売価格、在庫の有無、カートに入れるボタン、という構成です。もし製品詳細ページを設置する必要がある場合は、製品名にリンクを設置する形になります。
■重要なコンバージョンポイントのひとつと思われる「カートに入れる」ボタンは、をページ内でもいちばん目立つ赤色のボタンにしています。存在感がありますので重要なポイントであること示すことができます。ユーザーに購入を促すことが出来るかと思います。
⑤会社概要
■表を入れることが一般的ではありますが、項目の数が多くはないこと(＝表でなくてもいい)から、デザインのスタイリッシュさを減速させないよう、テキストベースで飾り気を削ぎ落したシンプルな作りにしています。
■背景にモノクロのフリー素材画像を敷いています。
コントラストの効いた画像です。ページ内のデザインのアクセントにもなっています。画像の変更可能です。
⑥代表挨拶
■代表者様のお写真があれば挨拶文の隣に設置することがステレオタイプではあります。が、お写真のご用意が無い場合やご用意の負担を踏まえ、あえて一旦テキストのみとしました。ですので、お写真などがございましたら設置も可能です。
■直筆サインであればご用意の負担も少なくて済むかと思います。お顔の写真が無い場合でも、手書きのサインデータをpngで配置すれば、より信頼感を確保できるかと思い、一旦仮定として、サイン、としましたがこちらも変更可能です。
⑦お知らせ
■バックに「エアガン」「サバゲー」といったイメージと親和性のあるテクスチャ(素材感のある画像)を入れました。画像のバリエーションとして、物体や人物の画像だけではなく、こういった素材感のある画像を1箇所でも取り入れることで、デザインに余白が生まれ、スタイリッシュな空気感をより表現することができるかと思います。
■更新上の負担も加味して、サムネイル画像は無しのテキストだけのシンプルな構成にしています。
■「日付」「文章の抜粋」が表示され、クリックでお知らせ詳細ページへ飛ぶ構成にしています。
■「すべてのお知らせを見る」でアーカイブの閲覧もできるようにしています。
⑧お問合せ
■参考サイトと運営上の負担軽減も加味し、一旦メールからの問い合わせ案内と、一般的な構成として会社情報を記載しています。
お問合せフォームのご用意がある場合は、フォームページへ飛ぶボタンを追加致します。
その他コンタクト方法の追加する必要がございましたらご要望のものを設置いたしますので、お申しつけください。
フッター
■SNSアイコン(一旦、Instagram、Youtube、Xを仮定設置)、プライバシーポリシー、コピーライトです。
LP(ページ内リンク)ですのでサイトマップは配置していません。
------------------------------------------------
デザイン、構成につきましてご説明は以上となります。
認識に異なる点がある場合はデザインを修正・変更致します。
ご要望や修正指示をご教授いただければ幸いです。
宜しくお願いいたします。
メンバーからのコメント
デザイン案①のページ全体のデザインを提出致します。
ご提案は以上になります。
宜しくお願いいたします！
※提案内容の詳細につきましては一つ目の提案メッセージへ記載しております。
提案内容のご確認の際はそちらをご参照いただけますようよろしくお願い申し上げます。
------------------------------------------------
▼デザイン提出案①
https://inshuu.jp/test/inshuu/crowdworks/231010_01/
▼デザイン提出案②
https://inshuu.jp/test/inshuu/crowdworks/231010_02/
▼デザイン提出案③
https://inshuu.jp/test/inshuu/crowdworks/231010_03/