ECサイト

No.
1	URL	https://ak-portfolio.blog/ec
2	作品ジャンル	本作品は、オンライン講座を販売することを想定したECサイトのWebデザイン作品である。クラシック音楽の演奏講義やITスキル講義などのデジタルコンテンツを商品として掲載し、ユーザーが講座を選択して購入できる構成を採用している。商品一覧、カート機能、マイアカウントなどECサイトの基本機能を備え、実際のオンライン教材販売サイトを想定したポートフォリオとして制作した。
3	作品タイトル	オンライン講座販売サイト
4	制作の目的	本制作の目的は、ECサイトの基本構造やユーザー導線を理解し、商品検索から購入までの一連の流れを設計するWebデザインスキルを身につけることである。また、オンライン講座の販売サイトを想定することで、デジタルコンテンツ販売に適したUI設計や商品ページ構成を実践的に学ぶことを目的とした。ポートフォリオとして、ECサイト制作能力を示すことも狙いとしている。
5	制作の課題	ECサイトでは、商品数が増えた場合でもユーザーが目的の商品を見つけやすい構造を設計することが重要な課題となる。本作品では、カテゴリ分けや商品一覧レイアウトを工夫し、視認性と操作性の両立を目指した。また、カート機能やアカウントページなどECサイト特有の機能を理解しながら、ユーザーが迷わず購入まで進める導線設計を考える点が課題となった。
6	ターゲット（誰に向けたデザインか）	本サイトのターゲットは、音楽演奏を学びたい初心者から中級者、またはITスキルをオンラインで学びたい社会人や学生を想定している。忙しい日常の中でも自宅で学習できるオンライン講座に興味を持つユーザーを対象とし、直感的に商品を探して購入できるシンプルな構成を意識して設計した。幅広い年代のユーザーが利用できるよう、わかりやすいUIを重視している
7	制作プロセス	まずECサイトの構造を調査し、トップページ、商品一覧、商品詳細、カートページなど必要なページ構成を整理した。その後ワイヤーフレームを作成し、ユーザーの動線を意識したレイアウトを設計した。次にデザイン制作とコーディングを行い、実際に商品が表示されるECサイト形式のページを構築した。最後に表示確認やデザイン調整を行い、ポートフォリオとして完成させた。
8	デザインのポイント	デザインでは、ECサイトとしての「見やすさ」と「商品情報の分かりやすさ」を重視した。商品画像とタイトルを中心に配置し、一覧ページでは複数の商品を比較しやすいグリッドレイアウトを採用した。また、カートやアカウントなどのナビゲーションを上部に配置し、ユーザーが迷わず操作できるように設計している。シンプルな配色と余白を活かし、情報を整理した視認性の高いデザインを意識した。
9	制作期間	制作期間は約3週間を想定している。1週目はECサイトの構成調査とワイヤーフレーム作成を行い、サイト全体のページ構造とユーザー導線を設計した。2週目はデザイン制作と基本的なレイアウト作成を進め、商品一覧や商品詳細ページのUIを整えた。3週目はコーディングと最終調整を行い、各ページの表示確認や細かなデザイン調整を行って完成させた。
10	使用ツール	制作には主にAdobe PhotoshopとIllustratorを使用し、Webデザインのレイアウト制作と画像加工を行った。コーディングにはHTMLとCSSを使用し、ECサイトの基本ページを構築した。また、WordPressとECプラグインを利用することで、商品登録やカート機能などECサイトとしての基本機能を再現した。これらのツールを組み合わせ、実際のECサイトに近い形で制作した。
11	工夫した点	ECサイトではユーザーが商品を素早く見つけられることが重要なため、カテゴリ分けや商品一覧の配置を工夫した。商品画像を大きく配置し、タイトルや価格が一目で分かるレイアウトにすることで、視認性を高めている。また、ナビゲーションメニューをシンプルに整理し、ユーザーが「商品検索 → 詳細確認 → カート追加」という流れを直感的に操作できるよう導線を設計した。
12	特記	本サイトはポートフォリオ用に制作したECサイトのデモ作品であり、実際に商品を購入することはできない構成となっている。ECサイトの基本機能やデザイン構成を学ぶことを目的とし、商品一覧・商品詳細・カートなど実際のECサイトを想定したページ構成で制作した。オンライン講座販売サイトをモデルとすることで、デジタルコンテンツ販売サイトのデザインを実践的に学んだ作品である。

No.
1	URL	https://ak-portfolio.blog/ec2/
2	作品ジャンル	本作品は、商品をオンラインで販売することを想定したECサイトのWebデザイン作品である。ユーザーが商品一覧から商品を選択し、詳細ページを確認してカートに追加するという、ECサイトの基本的な購買フローを体験できる構成で制作した。トップページ、商品一覧、商品詳細ページなどを設け、実際のネットショップに近いUI構成を意識して設計している。ポートフォリオ作品として、ECサイト制作の基礎的なデザイン力とサイト構造設計力を示すことを目的としている。
3	作品タイトル	Lifestyle Select Shop「Urban Market」ECサイトデザイン日常生活を豊かにする雑貨やライフスタイル商品を販売するオンラインショップを想定して制作したECサイトデザイン作品。シンプルで見やすいレイアウトをベースに、ユーザーが商品を探しやすく、快適に閲覧できる構成を意識した。商品一覧から詳細ページへの導線やカート機能など、実際のECサイトを想定したUI構成を取り入れ、ポートフォリオ作品としてECサイト制作スキルを表現した。
4	制作の目的	本制作の目的は、ECサイトの基本構造を理解し、商品閲覧から購入までのユーザー導線を意識したWebデザインを実践することである。オンラインショップでは、ユーザーが迷わず商品を探し、スムーズに購入まで進めることが重要であるため、ページ構成やナビゲーション設計を重点的に学ぶことを目的とした。また、ポートフォリオとしてECサイト制作スキルをアピールすることも制作の目的としている。
5	制作の課題	ECサイト制作では、商品情報が多くなるほどページが複雑になりやすく、ユーザーが目的の商品を見つけにくくなるという課題がある。本作品では、商品一覧のレイアウトやカテゴリ分けを工夫し、視認性を高めることを課題とした。また、カート機能やナビゲーションの配置など、ユーザーが迷わず操作できる導線設計を意識しながらデザインを構築する点が制作上の課題となった。
6	ターゲット（誰に向けたデザインか）	本サイトのターゲットは、オンラインで雑貨や生活用品を購入する20代〜40代の男女を想定している。スマートフォンやパソコンから手軽に商品を探し、スムーズに購入できるユーザー体験を重視した。特にECサイトに慣れていないユーザーでも直感的に操作できるよう、シンプルで分かりやすいUI設計を意識し、幅広いユーザー層が利用しやすいサイトを目指して制作した。
7	制作プロセス	制作はまずECサイトの構造調査から開始し、必要なページ構成を整理した。次にワイヤーフレームを作成し、トップページ、商品一覧、商品詳細、カートページなどのレイアウトを設計した。その後、デザイン制作を行い、配色やフォント、画像配置を調整しながらサイト全体のビジュアルを整えた。最後にHTML・CSSでコーディングを行い、表示確認と細かな調整を行って完成させた。
8	デザインのポイント	デザインでは「商品を見やすく、探しやすくすること」を最も重視した。商品一覧ページではグリッドレイアウトを採用し、複数の商品を一覧で比較しやすいよう配置している。また、商品画像を大きく配置し、視覚的に商品内容が伝わるように工夫した。配色はシンプルなカラーをベースにして情報を整理し、ユーザーが直感的に商品を選べるよう視認性の高いデザインを意識している。
9	制作期間	制作期間は約2〜3週間を想定している。最初の数日間でサイト構造の調査とワイヤーフレーム作成を行い、ECサイトのページ構成を整理した。その後デザイン制作とレイアウト調整を進め、商品一覧や商品詳細ページのUIを整えた。最後の1週間でHTML・CSSによるコーディングを行い、各ページの表示確認や細かなデザイン調整を行って完成させた。
10	使用ツール	制作にはAdobe PhotoshopおよびIllustratorを使用し、サイトデザインや画像素材の加工を行った。コーディングにはHTMLとCSSを使用し、Webサイトのレイアウトを構築した。また、WordPressとEC機能を持つプラグインを活用することで、商品一覧やカート機能などECサイトの基本機能を再現した。これらのツールを組み合わせ、実際のネットショップに近いサイト構成を制作した。
11	工夫した点	ユーザーが商品を探しやすくするため、商品一覧のレイアウトとナビゲーション構造を工夫した。商品画像を視覚的に目立たせる配置にすることで、ユーザーが直感的に商品内容を理解できるようにしている。また、トップページから商品一覧、商品詳細、カートページへと自然に移動できる導線を意識して設計した。シンプルなUIにすることで、操作の分かりやすさを重視した。
12	特記	本サイトは日本国内では主要なWelcartという決済システムを利用していることにある。また本サイトはポートフォリオ用に制作したECサイトのデモ作品であり、実際に商品を購入することはできない構成となっている。ECサイトの基本的な構造やデザインを学ぶことを目的として制作し、商品一覧ページや商品詳細ページなど、オンラインショップを想定したページ構成を再現した。実際のECサイト制作を想定したデザイン・コーディングの練習作品として制作したものである。