概要

PHP講座を2か月間受講した中で、CRUD操作（作成・参照・更新・削除）の理解を目的として英語単語帳アプリを制作しました。

工夫した点

①デザイン面：複数ある入力項目のうち、必須項目は色で強調し、アイコンを用いることで各項目の内容が直感的に分かるようにしました。

②サーバーサイド（PHP）：入力値の検証においてはホワイトリストの考え方を取り入れ、想定された形式のデータのみが登録されるように実装しました。

③フロントエンド（JavaScript）：英語入力欄に対して正規表現を利用して、入力ミスを防止しています。また、URLパラメータを利用して状態に応じたCSSの切り替えを行い、操作しやすいUIを意識しました。

概要

卒業制作として、更新のしやすさを意識したコーディングと、jQueryを用いた動きのあるWebサイトを制作しました。ターゲットは「留学に興味はあるものの、人見知りや英語への不安から一歩踏み出せない人」に設定し、前向きな気持ちになれるサイトを目指しました。

工夫した点

①ターゲット設計・構成：不安を感じているユーザーに寄り添い、閲覧を通して前向きな気持ちに変化していく構成を意識しました。マルタの魅力が直感的に伝わるよう、スライドやモーダル表示を用いて写真を多く掲載しています。

②デザイン：丸みのあるデザインやアニメーションを取り入れることで、全体的に柔らかく親しみやすい印象に仕上げました。また、夕焼けをイメージしたグラデーションを使用し、ヨーロッパの観光地らしいリラックス感を表現しています。文字色には明度を抑えた青を使用し、落ち着いた印象と視認性の両立を図りました。

③コーディング：更新のしやすさを意識し、再利用しやすい構造でコーディングを行いました。また、jQueryを用いてスライドやモーダル表示を実装し、視覚的に楽しめる動きを加えています。

概要

既存のバナーデザインをもとに、複数パターンのビジュアル案を制作しました。

工夫した点

案1（上部）は、商品と一緒に掲載されている既存バナーのデザインを踏襲し、ブランドイメージの統一感を意識して制作しました。
一方、案2（中央）・案3（下部）はターゲットを親世代に設定し、子どもの写真を使用することで、安心してウォータースポーツを楽しめる明るい雰囲気を表現しました。

採用結果と考察

最終的には、他の制作物とのデザイン統一性が評価され、案1が採用されました。この経験から、単体のデザインだけでなく、既存のクリエイティブとの一貫性を考慮する重要性を学びました。

概要

商品に同梱するポストカードとして制作しました。

工夫した点

写真の彩度を抑えることで、メッセージに自然と視線が向くよう設計しました。また、落ち着いたトーンの写真と細めのフォントを組み合わせることで、商品の高級感と大人らしい上品な印象を表現しています。

採用理由・結果

商品の世界観と調和した落ち着いたデザインが評価され、採用に至りました。

概要

商品に同梱するポストカードとして制作しました。

工夫した点

家族やお子様にも商品を使ってほしいというクライアントの意向をもとに、高級感を保ちつつ、円形のモチーフや丸みのあるフォントを取り入れ、明るく親しみやすい印象に仕上げました。

採用理由・結果

ターゲット層に合わせた柔らかくカジュアルな表現が評価され、採用に至りました。

概要

販売店向けに配布するポスターとして制作しました。

工夫した点

競泳の力強い印象を出したいというご要望を受け、メインビジュアルの人物を切り抜き、立体感のある構成にすることでダイナミックな表現を意識しました。また、高級感を伝えるため、文字要素には余白を持たせ、情報を整理しながら上品な印象に仕上げています。

採用理由・結果

競技の力強さと高級感を両立したデザインが評価され、採用に至りました。

概要

企業向けに配布するポスターとして制作しました。

工夫した点

①カラー設計：企業向けの配布を想定し、ブルーとグレーを基調としたフォーマルな配色としました。一部にイエローをアクセントとして使用することで全体にメリハリを持たせ、タイトルや重要情報の視認性を高めています。

②ビジュアル表現：デジタルアートの印象が弱くならないよう、背景にスピード感のある表現を取り入れ、デジタルらしさと先進的な印象を強調しました。

③タイポグラフィ：講座内容が直感的に伝わるよう、太めで視認性の高いフォントを使用し、情報の読みやすさを意識しています。

採用理由・結果

近未来的な世界観と情報の分かりやすさが評価され、採用に至りました。

概要

初めて来校される方をターゲットに、スクール入口に設置する看板のデザインを提案しました。

工夫した点

①情報設計（表面）：ビルの入口に設置されることを踏まえ、「何階に行けばよいか」「現在営業しているか」が一目で分かるように設計しました。アイコンを活用し、必要な情報を直感的に把握できるようにしています。

②コンテンツ設計（裏面）：スクールの特徴が伝わるよう、講座内容に合わせた写真（講師と受講生の学習風景）を選定し、サービスの魅力が伝わる構成としました。

③レイアウト：情報の優先順位を整理し、視線の流れを意識したメリハリのあるレイアウトで構成しています。

採用理由・結果

視認性と情報の分かりやすさ、メリハリのあるレイアウトが評価され、採用に至りました。