テクノポート株式会社様 初めまして。フリーランスでデザイン、WEB制作をしておりますbaymxと申します。 この度のデザインコンペにてご提案をさせていただきたく、トップページ（PC）のデザイン案を作成いたしました。 ※adobe XDにて作成 ブラウザ上で見えにくいようでしたら大変お手数ですが、pngデータをfirestorageにアップロードしておりますので、 下記URLよりデータをダウンロードの上ご確認いただけますと幸いです。※URLは6/12（水）まで有効です。 ----------------- https://firestorage.jp/download/203c5d381fe3b1903b0f250bb366d3749726cba9 ----------------- 以下、デザインの意図となります。（長文失礼いたします） ■カラーについて■ デザインコンセプトを意識し、カラーを設定いたしました。 メインカラー：濃い青（→自信） アクセントカラー：水色（→明るい） ベース（背景）カラー：灰色をわずかに入れた白（→安心、誠実） ■デザインに用いた直線と曲線について■ 頂戴したお写真を拝見し、直線と曲線で構成された工具やプレートなどの商品に美しさを感じました。 ビジュアル制作にあたり、直線だけでなく、この美しい曲線も構成要素に取り入れることで、 製造業の堅牢な印象だけでなく、藤栄冷熱工業様のしなやかさ（柔軟さ）、軽やかさ（フットワークの軽さ）、かっこよさが伝わるよう意識しました。 ■ファーストビュー（ヒーローエリア）について■ ・メインビジュアル 働く社員の方とキャッチコピーを添えて、藤栄冷熱工業様からのメッセージを印象的に訴求します。 今回のご提案ではデザインコンセプトにある「自信」「技術者のかっこよさ」を表現できるビジュアルを選定いたしました。 ビジュアルは一定時間で切り替わるような演出を想定しており、「明るい」「安心できる」などの各コンセプトに合ったビジュアルを表示します。 ・キャッチコピー メインビジュアルに添える次のキャッチコピーを配置しました。 —————— 「For your..」×「●●●」 —————— ●●●の部分は、一定時間で切り替わるビジュアルと同じタイミングで文言が入れ替わる想定をしています。 文言の候補として SAFETY / BUSINESS / COST などを考えています。 ・メニュー名、社名表記 アルファ・ラバル社様と共にグローバルな展開も目指しておられる印象を受けましたので、同社企業サイトのように社名を英語表記にしてみました。 ※和文表記はフッターで補完しております。 メニュー名も和文のみの場合、やや重い印象を受けましたので、文字数を減らし英語表記を添えることで、見やすさ、内容の分かりやすさを意識しています。 ・メニューの配置、お問い合わせ ファーストビューではビジュアル（＋キャッチコピー）を先に見てもらうため、グローバルメニューは左側に縦に配置しました。 ※第二階層以下については上部の配置を想定。 お問い合わせも重視されているとのことでしたので、ファーストビューにお問い合わせのCTAボタンを配置し、電話番号の表記も添えました。 また、右上にはハンバーガーメニューを設置しています。絶対配置し、スクロールに追従することでトップページのどこにいても下層ページへの導線を確保します。 ■メインエリアについて■ ・見出しと本文のメリハリ、余白 全体として見やすさ、読みやすさ、クリックのしやすさを意識しています。 見出しと本文の強弱をつける（ジャンプ率を上げる）ことで、若々しく軽やかな印象を与えることも意識しています。 また、ボタン周りの余白をしっかり取ることで、クリックのしやすさを意識しています。 ・メインメニュー（H2）、サブメニュー（H3） メインとなる見出しには英文表記を添えることで、読みやすく、クールな印象を意図しました。 また、「ビル」というワードが不可欠であると感じましたので、ファーストビュー直下のメニューに「ビルのトータルメンテナンス」というワードを入れています。 ・背景のビジュアル 頂戴した印象的なお写真からいくつかピックアップして背景に使用し、製造業らしさを表現しています。 下のメニューにまたがるよう、大きく写真を配置することで、スクロールしたくなるような効果も意図しています。 ・詳しく見るボタン マウスオーバーでアクセントカラーに変化することを想定しています。 ・ビルのトータルメンテナンス ナンバリングし、見やすさ、読みやすさを意識しました。 ・熱交換器メンテナンスの流れ トップページではなるべく早く工程のあらましをご理解いただいた方が良いかと思い、アイコンではなく、実写のスライダーによる表現にしてみました。 ・プレート式熱交換器の基礎知識 マウスオーバーで文字色が変わり、各メニューに応じた写真に切り替わることを想定しています。 ・メンテナンス事例 項目が多くなるようでしたらスライダーにすることも想定しています。 ・お問い合わせ 現行サイトを参照し、お問い合わせの障壁を緩和するコピーを添えました。 CTAボタンにアクセントカラーを用い、文言を変えることでクリックを促します。 ■フッターについて■ 藤栄冷熱工業様の表札をあしらいました。お問い合わせが目立つように配置しています。 メニュー内容が増えたり、今後SNSなどを運用されるようでしたらリンクアイコンやバナー等の設置などができるよう、スペースを大きく確保しています。 メニュー名が見やすいよう、白を基調とした明るいフッターを意識しました。 以上となります。長文失礼いたしました。 ご要望等ございましたら柔軟に対応いたしますので、お気軽にお申し付けいただけますと幸いです。 ご検討の程よろしくお願いいたします。
メンバーからのコメント
テクノポート株式会社様
初めまして。フリーランスでデザイン、WEB制作をしておりますbaymxと申します。
この度のデザインコンペにてご提案をさせていただきたく、トップページ（PC）のデザイン案を作成いたしました。
※adobe XDにて作成
ブラウザ上で見えにくいようでしたら大変お手数ですが、pngデータをfirestorageにアップロードしておりますので、
下記URLよりデータをダウンロードの上ご確認いただけますと幸いです。※URLは6/12（水）まで有効です。
-----------------
https://firestorage.jp/download/203c5d381fe3b1903b0f250bb366d3749726cba9
-----------------
以下、デザインの意図となります。（長文失礼いたします）
■カラーについて■
デザインコンセプトを意識し、カラーを設定いたしました。
メインカラー：濃い青（→自信）
アクセントカラー：水色（→明るい）
ベース（背景）カラー：灰色をわずかに入れた白（→安心、誠実）
■デザインに用いた直線と曲線について■
頂戴したお写真を拝見し、直線と曲線で構成された工具やプレートなどの商品に美しさを感じました。
ビジュアル制作にあたり、直線だけでなく、この美しい曲線も構成要素に取り入れることで、
製造業の堅牢な印象だけでなく、藤栄冷熱工業様のしなやかさ（柔軟さ）、軽やかさ（フットワークの軽さ）、かっこよさが伝わるよう意識しました。
■ファーストビュー（ヒーローエリア）について■
・メインビジュアル
働く社員の方とキャッチコピーを添えて、藤栄冷熱工業様からのメッセージを印象的に訴求します。
今回のご提案ではデザインコンセプトにある「自信」「技術者のかっこよさ」を表現できるビジュアルを選定いたしました。
ビジュアルは一定時間で切り替わるような演出を想定しており、「明るい」「安心できる」などの各コンセプトに合ったビジュアルを表示します。
・キャッチコピー
メインビジュアルに添える次のキャッチコピーを配置しました。
——————
「For your..」×「●●●」
——————
●●●の部分は、一定時間で切り替わるビジュアルと同じタイミングで文言が入れ替わる想定をしています。
文言の候補として
SAFETY / BUSINESS / COST
などを考えています。
・メニュー名、社名表記
アルファ・ラバル社様と共にグローバルな展開も目指しておられる印象を受けましたので、同社企業サイトのように社名を英語表記にしてみました。
※和文表記はフッターで補完しております。
メニュー名も和文のみの場合、やや重い印象を受けましたので、文字数を減らし英語表記を添えることで、見やすさ、内容の分かりやすさを意識しています。
・メニューの配置、お問い合わせ
ファーストビューではビジュアル（＋キャッチコピー）を先に見てもらうため、グローバルメニューは左側に縦に配置しました。
※第二階層以下については上部の配置を想定。
お問い合わせも重視されているとのことでしたので、ファーストビューにお問い合わせのCTAボタンを配置し、電話番号の表記も添えました。
また、右上にはハンバーガーメニューを設置しています。絶対配置し、スクロールに追従することでトップページのどこにいても下層ページへの導線を確保します。
■メインエリアについて■
・見出しと本文のメリハリ、余白
全体として見やすさ、読みやすさ、クリックのしやすさを意識しています。
見出しと本文の強弱をつける（ジャンプ率を上げる）ことで、若々しく軽やかな印象を与えることも意識しています。
また、ボタン周りの余白をしっかり取ることで、クリックのしやすさを意識しています。
・メインメニュー（H2）、サブメニュー（H3）
メインとなる見出しには英文表記を添えることで、読みやすく、クールな印象を意図しました。
また、「ビル」というワードが不可欠であると感じましたので、ファーストビュー直下のメニューに「ビルのトータルメンテナンス」というワードを入れています。
・背景のビジュアル
頂戴した印象的なお写真からいくつかピックアップして背景に使用し、製造業らしさを表現しています。
下のメニューにまたがるよう、大きく写真を配置することで、スクロールしたくなるような効果も意図しています。
・詳しく見るボタン
マウスオーバーでアクセントカラーに変化することを想定しています。
・ビルのトータルメンテナンス
ナンバリングし、見やすさ、読みやすさを意識しました。
・熱交換器メンテナンスの流れ
トップページではなるべく早く工程のあらましをご理解いただいた方が良いかと思い、アイコンではなく、実写のスライダーによる表現にしてみました。
・プレート式熱交換器の基礎知識
マウスオーバーで文字色が変わり、各メニューに応じた写真に切り替わることを想定しています。
・メンテナンス事例
項目が多くなるようでしたらスライダーにすることも想定しています。
・お問い合わせ
現行サイトを参照し、お問い合わせの障壁を緩和するコピーを添えました。
CTAボタンにアクセントカラーを用い、文言を変えることでクリックを促します。
■フッターについて■
藤栄冷熱工業様の表札をあしらいました。お問い合わせが目立つように配置しています。
メニュー内容が増えたり、今後SNSなどを運用されるようでしたらリンクアイコンやバナー等の設置などができるよう、スペースを大きく確保しています。
メニュー名が見やすいよう、白を基調とした明るいフッターを意識しました。
以上となります。長文失礼いたしました。
ご要望等ございましたら柔軟に対応いたしますので、お気軽にお申し付けいただけますと幸いです。
ご検討の程よろしくお願いいたします。