・製作期間・時間 2024.2 3週間 ・コンペ結果 優秀賞　受賞 ・使用ソフト Figma,Photoshop ・要件定義・ワイヤー作成 クライアントの要望により、表現が硬くなりすぎないようにロゴの曲線をイメージした背景を用いたワイヤーを作成。全体にブルー系の配色を使用しています。また、イラストの使用やメインコピーの砕けた表現を通じて、硬すぎない印象を与えるようにバランスを取ることを意識しました。 ・お題 メディア「ProMaga」のWebデザイン ・主なお客様（ターゲット） ①20~40代のコンサルタント ②30~50代の大手事業会社のマネージャー ・顧客の課題（ニーズ） コンサルタントプロジェクトを炎上させないために、色々な情報やナレッジを知りたい。 ・コンセプトと制作イメージ プロマガは、コンサルプロジェクトを成功させるためのノウハウやナレッジの紹介、そして参考になる事例、コンサルにまつわる面白いニュースを取り扱う、コンサルに特化した、次の文化を創るイノベーターの方々に向けたメディアです。プロジェクトの成功を上げていき、プロマガを見れば、プロジェクトは炎上しない、皆が成功に走ることができるメディアを目指していきます。 ・商品のベネフィット・特徴 コンサルに特化した情報の提供 ・カラーコード・カラースキーム 青系統でシンプル ・制作における要望 信頼性があるトーンで作成していただけると助かります。ただ、かたすぎる昔の中小企業のHPやコンサルファームのHPのようなものより、先進性があると理想です。 メディアとして他の記事を読みたくなるようなトーンだとありがたい。 - 他社調査 デザイン制作にあたり、クライアントから提供された参考サイトだけでなく、同様のサービスを提供する他のウェブサイトも調査しました。 その結果、コンサルタント系サイトでは青系のビジネス配色パターンや、カクカクした硬い表現や高級感を強調するブラウンやゴールドの色調を使用しているパターンが大半を占めることがわかりました。 しかし、今回は敢えて異なるアプローチを選びました。 高級感を追求する代わりに、よりカジュアルで親しみやすいビジュアルデザインを採用しました。この選択は、記事閲覧の初期ハードルを下げ、より多くのユーザーがコンテンツにアクセスしやすくするためのものです。 キーワード 　・硬くなりすぎない表現 　・記事閲覧に対してのハードルを下げる デザイン・機能説明 ・ファーストビュー 初期案の曲線あしらいを廃止し、FVの半分を使用してメインビジュアルとコピー、CV1・2を配置。廃止理由：カジュアルイメージが強く、記事内容が軽く見られてしまう可能性がある為。上記でCV訴求をしつつ、FV内にピックアップ記事のカルーセルを見切れさせることで、記事に意識を向わせ記事内容を確認させる動線にしています。 ・サイト概要の記載 初見の場合にサイト自体の概要がわかるようにヘッダーには「ProMagaとは」の説明ページ遷移を設けることを想定しています。 ・カテゴリ・タグ・キーワード検索機能 ヘッダー内のキーワード検索機能に加えて、記事一覧セクションでは記事のカテゴリ・タグ検索機能を配置。不タグに関しては複数選択の検索も可能としており、ある程度幅を持った形で記事を読み進めることもできる。 ・ブックマーク機能 記事にはブックマーク機能を持たせており、アイコンをクリックすることで気に入った記事をブックマークすることができる。ブックマーク後はメニュー内のブックマークボタンから記事を再度呼び出すことができる。