超実践的デザイン訓練・架空サイトリニューアル｜パキッテ編｜ブログ｜東京のWeb制作会社・ホームページ制作

こんにちは、QUOITWORKS Incです。

新卒で入社してから半年が経ちました。

入社した頃に比べれば少しは成長しているとは思うのですが、まだまだ基本的なことが出来ていないためデザインが上手くなれるよう勉強する毎日です。

早速ですが今回は、勉強として架空のサイトリニューアルに挑戦したのでその内容をまとめていきたいと思います！

未経験で入社すると、最初はパーツの作成など小さい作業から始めていくと思います。

かと言って、いざ大きめのデザインの仕事が来た際にいきなりデザインすることは難しいため、弊社では勉強として架空のサイトリニューアルを定期的に行なっています。

普段から訓練することでそういった機会に対応する準備ができ、会社側もその人の実力感をいきなり実案件で試すのではなく、学習の中でつかめるため双方にメリットがあるそうです。

今回のリニューアルは勉強としてやっているということと、実際の制作では様々なフローを行っており、全ての工程をやるとかなりの時間が掛かることから実際の制作フローの中でも基本的なもののみを行いました。

まず、最初に題材にした「パキッテ」というサイトについて説明します。

こちらが現状サイトです。

https://www.dpj.co.jp/

このサイトはディスペンパックジャパンという会社のコーポレートサイトで「パキッテ」というソースなどを入れる2つに割れる容器を製造しています。

↓パキッテ

よくコンビニやファストフード店で見かけますね。皆さん一度は使ったことがあるかと思います。

今回は1番の制作目的を「お問い合わせの増加」、2番目の目的を「採用応募の増加」に設定しました。

次にリニューアルしたデザインです。

※実案件ではなく勉強として行なっているもののため、デザインに使用した画像は「ネット検索」や「他サイト」などから持ってきたものがあります。不都合ございましたら迅速に取り下げさせていただきますのでご一報いただけますと幸いです。何卒ご容赦願います。

ファーストビュー

ファーストビューから1セクション目までのスクロールした際の動き

全体

リニューアル課題は以下の手順で進めていきました。

ヒアリング
課題の整理・ゴール設定
サイトコンテンツの設計・デザイン方向性のすり合わせ
ワイヤーフレーム作成
デザイン作成

1.ヒアリング

まずヒアリングを行い、サイトの制作目的やクライアントの抱えている課題を理解しました。

今回は架空のリニューアルで実際のクライアントがいないため、ムラマツさん（@muuuuu_chang）にお客さん役になってもらい、ヒアリングシートを埋めました。

実案件でも使用しているヒアリングシートを使ったのですが「製品について」「デザインについて」など細かく分類されていて、「ヒアリングってこんなに深く聞くものなのか…！」と驚きました。

ヒアリングは自分だけで決めてしまうと自分に都合がいいように設定してしまい、実践的でなくなる可能性があるため、上司などに手伝ってもらうといいそうです。

学んだこと・コツ
・ヒアリングは「製品について」「デザインについて」などあらゆる面から細かく質問することでよりどのようなサイトにすべきか見えてくる。
・ヒアリングは自分一人で行うよりも、上司などに手伝ってもらった方がより実践的な課題になる。

2.課題の整理・ゴール設定

次にヒアリングシートで出た課題からゴール設定を決めました。

ゴール設定は、課題に対して「〇〇な状態になっていれば、その課題が解決されている」というものを言語化したものです。

お客さんから聞いた課題は抽象度が高いため、ここでより具体的にすることが重要だそうです。

またゴール設定は、デザイン面とコンテンツ面の２つに分類することが大事だそうです。

分類する理由としては全ての課題の原因がデザインによるとは限らないため、この課題はデザイン面の課題なのか、コンテンツ面か、それ以外かと深掘り・分類することで原因が明らかになります。

作る際には、第三者目線でこんな質問はこないか、穴がないかなど仮説を立てながら作るといいそうです。

学んだこと・コツ
・お客さんから聞いた課題は抽象度が高いため、ゴール設定でより具体的にする。
・ゴール設定をデザイン面とコンテンツ面の２つに分けることで課題の原因が明らかになる。
・第三者目線でこんな質問はこないか、穴がないかなど仮説を立てながら作る。
・同じ、似たような課題は一つにまとめる。
・上手く作れない時はサイトの型や必要なコンテンツなどを調べてみる。

3.サイトコンテンツの設計・デザイン方向性のすり合わせ

ゴール設定が決まったらディレクトリマップの作成と参考サイトの選定をします。

ディレクトリマップでサイトの全体像を想像することで、トップページにどんなコンテンツが必要かが見えてくるそうです。

また、作る時には競合の調査をするのが大事だそうで、近い業種のサイトも見てどんなコンテンツを載せているのかを踏まえた上で作成しました。

次にデザイン作成時に参考にするサイトを選定しました。

参考サイトを選び、実際に作る前に完成サイトのイメージを共有することで、お客さんとのギャップが生まれないようにできるそうです。

こんな感じで理由とセットで選定しました。

参考サイト：https://www.beangels.eu/fr

参考にする箇所：サイト内にモチーフを散りばめている所

選定理由：
パキッテという商品自体は身近である一方で、商品名やどこの会社が作っているかはあまり知られていないため、参考サイトのようにサイト内に商品をイメージできるようなモチーフを散りばめることで、会社や商品の認知度が上がるサイトにします。

学んだこと・コツ
・サイトの全体像を想像することで何のコンテンツを入れるべきか見えてくる。
・ディレクトリマップを作る際には、競合や同じ業種のサイトでどんなコンテンツが用意されているか調べて自分がつくるものはそれ以上になるようにする。
・参考サイトを選ぶことで事前に完成イメージを共有する。

4.ワイヤーフレーム作成

次にワイヤーフレームを作りました。

ここでは、トップページで見せるストーリーと伝えたいことの優先順位を決めます。

ワイヤーフレームの中に何を入れるか可能な限り具体的に書くことで、デザインする時に入れる内容で悩まず、デザインそのものに時間を割くことができるそうです。

例えば文章はダミーテキストではなく、できる限り実際に入れる文章を書きます。

また、ワイヤーのデザインがお客さんのイメージになってしまうと作った時にワイヤーと異なるという状態になってしまうためワイヤーでは出来るだけデザインせずシンプルに作ったほうがいいそうです。

また、押せるところはボタンでもテキストリンクでも下線と矢印をつけるなど誰が見ても分かる状態にする必要があります。

学んだこと・コツ
・トップに何を載せるべきかと伝えたいことの優先順位を確定させる。
・入れるものは出来るだけ具体性を持たせる(文章はダミーテキストにしないなど)
・ワイヤーフレームではデザインしない。
・誰が見ても分かる状態にする（押せる所と押せない所を区別するなど）