Masaki Matsuzawa's Portfolio
Web Design
[Web Design]
使用スキル
Figma, Illustrator, Photoshop
2023.10 ~ 2023.11
Group Work
制作背景
本作品は、グループワーク課題によって制作された。
テーマ：グループ（4人）で東北2泊3日の旅行プランを企画し、それに関連したガイドサイトを制作する。
デザイン・プランニングルール：
予算は3日間合計300,000円まで。ただしJRが運営する鉄道を利用した際の金額は除く。（例：新幹線での移動費は計算しない）
旅行に行くことは決定済み。そのプランニングおよび旅行前および旅行時に使用するガイドサイトを制作する。
旅行者のインスピレーションを掻き立て、日々の仕事から解き放たれる体験が可能なプランを提案すること。
移動方法・食事・宿泊をこちら側が決める。
ターゲット
年齢は40代前半、Webデザイナーとして働く夫婦と小学4年生の男子の3人家族。
ターゲットの設定背景：
家族揃って旅好き。年に2回以上は家族旅行に出掛けている。
ゆったりとした旅程が好み。アクティビティを楽しむというより、様々な体験をしたいという考えがある。
夫と子供は歴史好き。特に日本史が好きで、日頃から城跡や資料館に訪れている。
妻は自然や温泉が好き。温泉がある旅先であれば、温泉にゆったり浸かって身体を休めたいと考えている。
ワークフロー
今回のグループワークにおいて私が主導したこと
ワークフローの全体設計と進行（1~8）
ガイドサイトの情報設計（3）
トンマナ設計を含むビジュアル全体のディレクション（4〜8）
1. ターゲットの好みや予算に沿った旅のルートを検討
ターゲットの好みや旅先から連想するイメージをグループメンバーで出し合った。出た意見から「どういった旅が可能であるか」「どういった旅であればターゲットは満足できるだろうか」など旅のプランニングについて大まかな方針を検討した。
またターゲットの立場になることで「どういったシチュエーションでサイトを利用するだろうか」「ターゲットが旅をするならどういった体験をしたいか」についても検討。訪れたい場所、やりたい体験について「温泉」「伝統工芸」「森林浴」といったワードを挙げていき、イメージを共有した。
2. コンセプトとそれに伴うロゴを設定
旅行体験やサイト利用のイメージを膨らませた後、今回のプランニングにマッチしたコンセプトを設定。コンセプトには「東北を、愉しむ。」を掲げた。旅ならではの体験を心から満喫してほしいという想いを込めた。ターゲットロゴはCormorant Garamondを用いて作成。他では味わえない特別な旅であることを印象づけた。
3. 話し合いから出たプランのイメージに合うサイトや参考素材を探索
演出したいプランのテイストに合う参考素材をグループメンバー全員で探索。具体的なビジュアルアウトプットを行う前に、既にあるサイトや写真を共有し、ムードボードや参考サイトボードを作成。具体的なアウトプットイメージをグループで共有した。
グループで出たイメージを見ながら、コンセプトに迎合したものやターゲットの満足度を向上させられるイメージとそうでないイメージの仕分けを行った。これらを通じて、おおまかな3日間の旅行プランとサイトイメージを確認した。
4. サイト内の情報設計および情報内容を精査
まずサイトを通じて伝える必要のある情報について、おおまかにグループ内で共有。次に伝える内容をサイト上に反映する場合、どのようにしてページが構築されるかについて議論。その後、サイトにおける伝達内容を端的にビジュアル化し、サイト設計についてグループで確認を行った。ビジュアルアウトプットを行う際に、ページ内要素がどのように展開されていくかについて体系化し、全員の認識を共通のものにした。
5. フォント・カラー等のスタイルガイドを設定
ページが実現したい方向性やピックアップした場所の特性を踏まえ、フォントやカラー、ボタン、メニューを設定。フォントに関しては、ターゲットの好みや予算規模を踏まえ、ベースとなるフォントと装飾フォントの2種類（和文、欧文合わせて合計4種類）を設定した。またWebサイトという特性を踏まえ、利用者の媒体に関わらず原則表示可能なGoogle Fontsから選んだ。
和文…基本：Zen Kaku Gothic New、装飾：Shippori Mincho B1
欧文…基本：Lato、装飾：Cormorant Garamond
6. 各自でサイトの1ページ+トップページを簡単に制作
ページレイアウトや配色を具体的に検討するため、メンバー各々が簡易版を制作。制作してきたものを持ち寄り、今まで方向付けてきた要素とマッチしているかを協議した。各制作物の良いところを組み合わせ、最終的なビジュアルアウトプットに向けたレイアウトと配色を決定。
7. ページごとに担当を振り分けて制作 ─ 完成
メンバーで意見を交わしながら、コンセプトやトンマナを意識したビジュアルアウトプットを進めた。作業を進めていく中で違和感を感じる部分があれば、前のフェーズで方向づけた事項であっても変更を加えながら慎重にビジュアルを形成した。
成果物
・モバイル版紹介サイト（Figmaで作成）
・スタイルガイド（Figamaで作成）
Solutions
Solutions
旅行プラン 紹介サイト
Web Design
[Web Design]
2023.10 ~ 2023.11
使用スキル
Figma, Illustrator, Photoshop
制作背景
本作品は、グループワーク課題によって制作された。
テーマ：グループ（4人）で東北2泊3日の旅行プランを企画し、それに関連したガイドサイトを制作する。
デザイン・プランニングルール：
予算は3日間合計300,000円まで。ただしJRが運営する鉄道を利用した際の金額は除く。（例：新幹線での移動費は計算しない）
旅行に行くことは決定済み。そのプランニングおよび旅行前および旅行時に使用するガイドサイトを制作する。
旅行者のインスピレーションを掻き立て、日々の仕事から解き放たれる体験が可能なプランを提案すること。
移動方法・食事・宿泊をこちら側が決める。
ターゲット
年齢は40代前半、Webデザイナーとして働く夫婦と小学4年生の男子の3人家族。
ターゲットの設定背景：
家族揃って旅好き。年に2回以上は家族旅行に出掛けている。
ゆったりとした旅程が好み。アクティビティを楽しむというより、様々な体験をしたいという考えがある。
夫と子供は歴史好き。特に日本史が好きで、日頃から城跡や資料館に訪れている。
妻は自然や温泉が好き。温泉がある旅先であれば、温泉にゆったり浸かって身体を休めたいと考えている。
ワークフロー
今回のグループワークにおいて私が主導したこと
ワークフローの全体設計と進行（1~8）
ガイドサイトの情報設計（3）
トンマナ設計を含むビジュアル全体のディレクション（4〜8）
1. ターゲットの好みや予算に沿った旅のルートを検討
ターゲットの好みや旅先から連想するイメージをグループメンバーで出し合った。出た意見から「どういった旅が可能であるか」「どういった旅であればターゲットは満足できるだろうか」など旅のプランニングについて大まかな方針を検討した。
またターゲットの立場になることで「どういったシチュエーションでサイトを利用するだろうか」「ターゲットが旅をするならどういった体験をしたいか」についても検討。訪れたい場所、やりたい体験について「温泉」「伝統工芸」「森林浴」といったワードを挙げていき、イメージを共有した。
2. コンセプトとそれに伴うロゴを設定
旅行体験やサイト利用のイメージを膨らませた後、今回のプランニングにマッチしたコンセプトを設定。コンセプトには「東北を、愉しむ。」を掲げた。旅ならではの体験を心から満喫してほしいという想いを込めた。ターゲットロゴはCormorant Garamondを用いて作成。他では味わえない特別な旅であることを印象づけた。
3. 話し合いから出たプランのイメージに合うサイトや参考素材を探索
演出したいプランのテイストに合う参考素材をグループメンバー全員で探索。具体的なビジュアルアウトプットを行う前に、既にあるサイトや写真を共有し、ムードボードや参考サイトボードを作成。具体的なアウトプットイメージをグループで共有した。
グループで出たイメージを見ながら、コンセプトに迎合したものやターゲットの満足度を向上させられるイメージとそうでないイメージの仕分けを行った。これらを通じて、おおまかな3日間の旅行プランとサイトイメージを確認した。
4. サイト内の情報設計および情報内容を精査
まずサイトを通じて伝える必要のある情報について、おおまかにグループ内で共有。次に伝える内容をサイト上に反映する場合、どのようにしてページが構築されるかについて議論。その後、サイトにおける伝達内容を端的にビジュアル化し、サイト設計についてグループで確認を行った。ビジュアルアウトプットを行う際に、ページ内要素がどのように展開されていくかについて体系化し、全員の認識を共通のものにした。
5. フォント・カラー等のスタイルガイドを設定
ページが実現したい方向性やピックアップした場所の特性を踏まえ、フォントやカラー、ボタン、メニューを設定。フォントに関しては、ターゲットの好みや予算規模を踏まえ、ベースとなるフォントと装飾フォントの2種類（和文、欧文合わせて合計4種類）を設定した。またWebサイトという特性を踏まえ、利用者の媒体に関わらず原則表示可能なGoogle Fontsから選んだ。
和文…基本：Zen Kaku Gothic New、装飾：Shippori Mincho B1
欧文…基本：Lato、装飾：Cormorant Garamond
6. 各自でサイトの1ページ+トップページを簡単に制作
ページレイアウトや配色を具体的に検討するため、メンバー各々が簡易版を制作。制作してきたものを持ち寄り、今まで方向付けてきた要素とマッチしているかを協議した。各制作物の良いところを組み合わせ、最終的なビジュアルアウトプットに向けたレイアウトと配色を決定。
7. ページごとに担当を振り分けて制作 ─ 完成
メンバーで意見を交わしながら、コンセプトやトンマナを意識したビジュアルアウトプットを進めた。作業を進めていく中で違和感を感じる部分があれば、前のフェーズで方向づけた事項であっても変更を加えながら慎重にビジュアルを形成した。
成果物
・モバイル版紹介サイト（Figmaで作成）
・スタイルガイド（Figamaで作成）