勉強の続き:複数ページのサイトを作る

HTML/CSS

今日から最終章に入りました。
カピぞうくんが始めるレストランのホームページを作ります!

教材はこれです


11章では、制作の流れとwebデザインのきほん、ということで、作業はなく、サイトを作るためにどんな準備が必要なのかの解説。

まず企画と要件定義をする。ターゲットユーザーや目標の設定が必要というのはFammでもやった気がするんですけど、カスタマージャーニーマップというのは初めて。

カスタマージャーニーマップとは:

カスタマージャーニーマップとは?作り方・事例など基礎知識を徹底解説【テンプレートあり】 | PR TIMES MAGAZINE

めっちゃ詳しく載ってる〜!

カスタマージャーニーマップとは、ユーザーが商品・サービスを認知してから購買にいたるまでの一連の流れを視覚化した図式のこと

――出典:カスタマージャーニーマップとは?作り方・事例など基礎知識を徹底解説【テンプレートあり】

あ、ここでもペルソナを設定する、というのが出てきた…。
ペルソナというのは「特定の商品をリーチしたい架空の人物」のことで、誰に売りたいか(来て欲しいか)ということですよね。Fammでも言われた、ターゲットを設定する。
漠然と「うちのレストランはすごくいいです、美味しいですよ!」と言っていてもダメで、
「うちのレストランは小さいお子様にも上質な、新鮮で美味しいお野菜を召し上がっていただきたいので、小学生のお子さんがいる家族連れ(外食できる財力があり子供に良いものを食べさせたいと考えていてマナーも幼いうちから教えておきたいと考えている両親)がターゲット」まで決める必要があるということですね。
小学生のお子さんが来ることを想定しているなら、レストランではこんな工夫をしていますとか、アピールすることも違ってくるしね。

ここで、訴求したいことやいろんな情報を抽出して、整理する。

その後、サイト設計をする。ターゲットが求めているものはなんなのか。それに沿って、デザインコンセプトを決め、情報を整理してサイトマップを決め、ここまでやって初めてワイヤーフレームをつくる。

ワイヤーフレームとは:

ワイヤーフレームとは?よいページを設計するための確認点や作り方など
この記事では、初めてホームぺージ制作を外注する方向けに、ワイヤーフレームの基礎知識や確認するときのポイントを解説しています。また、ワイヤーフレームの作り方も解説しているので、自分のイメージを明確に伝えたいときや、修正指示を出すときなどに活用...

要するに、デザインカンプを作る前の設計図、ということですよね?まだ色とか写真とか決める前のもの。

それからUI/UXデザインが出てきました!

UI/UXデザインとは:

UI/UXとは? 意味や違いについて分かりやすく解説
UIとは、ホームページ内で閲覧、もしくは操作する要素のことです。UXとは、ホームページを利用したときのユーザー体験(感情)を指します。UIとUXは別物ですが、密接な関係にあります。この記事では、UIとUXを向上するためのポイントを、分かりや...

UI(ユーザーインターフェース)というのは、ユーザーが訪れたウェブサイトで得る情報全般のこと。テキスト、画像、音声、動画、それらすべて。

UX(ユーザーエクスペリエンス)は、ウェブサイトを利用したときにユーザーが抱く感情のこと。

UIでどういう配置で情報をユーザーに伝えるのかを考えてデザインし、UXで、ユーザーにどんな感情を抱いて欲しいかを考えてデザインする、ということでいいのかな。

いろんなこと考えて設計しないといけないんですね。ここにウェブアクセシビリティまで入ってくると相当大変そうです…。

ウェブアクセシビリティとは:

https://www.gov-online.go.jp/useful/article/202310/2.html

コメント

タイトルとURLをコピーしました