マルタ共和国を専門とした留学エージェントの架空サイトを作成しました。
風景写真を多く使用し、視覚的にマルタの美しさや魅力を強調するとともに、アイコンやマウスオーバー効果などを取り入れ、直感的にユーザーが分かりやすいデザインを心掛けました。
サイトURL
制作ページ
トップページ、学校紹介、お問い合わせの3ページ
担当
デザイン・ライティング・コーディング（レスポンシブ対応）
使用ソフト
Visual Studio Code / Photoshop
サイトの目的
サービスの認知と新規顧客の獲得
ターゲット
メインは20-30代の社会人
ファーストビューについて
- 高揚感と未来への期待感の演出：
青い空と飛行機の写真により新しい世界へ飛び出すようなデザインにしました。
ピンクとオレンジ色のポップなカラーや人物写真を使用し、楽しさとわくわく感を表現しました。 - 親しみやすさと信頼感の表現：
ロゴとキャッチコピーにカジュアルなフォントを採用し、親しみやすい雰囲気を演出しました。
ゴールドと赤のエンブレムおよび明朝体のフォントを使用することで、信頼感と費用面での安心感を強調しました。
カラーについて
- 背景色：
爽やかな水色で、マルタの透き通る海と広がる空を表現しました。 - アクセントカラー：
マウスオーバー時のボタンカラーにはピンクを設定し、チャレンジ精神やマルタのフレンドリーな温かさを象徴する色として取り入れました。
デザインについて
- 視覚的魅力と自然美の強調：
海や空などの風景写真を多く取り入れ、マルタの自然の美しさを強調しました。また、笑顔溢れる海外学生の写真で、多文化的な魅力や人との繋がりを表現しました。 - 可読性と視認性：
文字の背面にオーバーレイやドロップシャドウを使用し可読性に配慮しました。また、アイコンを活用するなど、直感的で親しみやすく視認性の高いデザインを実現しました。 - 動的要素とアクセント：
マウスオーバー時に色や文字サイズを変化させ、単調さを回避しました。さらに、CSSのbackground-attachment: fixedを使用して背景に動きを加え、デザイン全体に動的な印象を取り入れました。 - ユーザビリティと情報設計：
リンクを適切に配置することで、必要な情報へのスムーズなアクセスに配慮しました。 - ポジティブな印象のデザイン：
キャンペーンやイベント情報には、明るくポップな色で意欲が沸くようなカラーを採用しました。また、学校紹介のページでは扉の形を取り入れ、前向きな気持ちになるようなデザインを意識しました。
制作時間
56時間
企画：3時間、デザイン：7時間、ライティング：1時間、コーディング：45時間