ウェブデザインB 第08回 - ウェブデザインB | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザインB 第08回

webdesignb08

以前、本講義内で「ユーザーに違和感を与えないことが重要」と話しました。
違和感があるとお問い合わせなどのコンバージョンには到底辿り着かないという内容でしたが、
今回は「使いやすさ」「見やすさ」に重点を置き「UIデザイン」「UXデザイン」「ユーザビリティ」の解説を行います。

この記事の目次

UIデザイン

UIは「ユーザー目線で配慮され組まれた設計」

ユーザーインターフェースとは、機器やソフトウェア、システムなどとその利用者の間で情報をやり取りする仕組み。システムから利用者への情報の提示・表示の仕方と、利用者がシステムを操作したり情報を入力したりする手段や方式、機器、使い勝手などの総体を表す。

参考:ユーザーインターフェース(UI)とは – IT用語辞典 e-Words

まずUIとは?という点から入りましょう。
UIとはユーザーインターフェース(User Interface)の略で、ユーザー(User)と使用端末装置の接点(Interface)という意味を持っています。「つながり」という言葉がふさわしいですね。

ではUIデザインとは何か?というと、ユーザーがWebサイトやアプリを見たり使ったりする時に、
快適に閲覧・使用できるように設計を行うことを意味します。言うなれば使用法・操作法ですね。

ウェブサイトの場合、適切なUIデザインが行われた結果から得られるのは、
「フォントが適度に大きくて読みやすい」だとか「ボタンのサイズが適度に押しやすい」だとか、
「見たいページへのリンクがわかりやすい場所にある」といった効果です。

ページデザイン、テキスト、ボタンなど、ユーザーが触れる全てがUIということになり、
ユーザーのために考えられユーザー目線で配慮され組まれた設計が優れたUIデザインだといえます。

UIに関してはさまざまな媒体で情報が公開されています。ちょっと見てみましょう。

参考:UIデザインってなに?基礎知識やUXデザイン・Webデザインとの違いを解説! | CodeCampus
参考:聞いたことはあるけど「UIデザイン」とは? | TechAcademyマガジン
参考:【永久保存版】エンジニア・デザイナー必見!「UI/UX」の基礎が学べるSlideshare30選

これらの情報でより理解が深まるかと思います。

GUI

GUIとは、コンピュータの表示・操作体系(ユーザーインターフェース)の分類の一つで、情報の提示に画像や図形を多用し、基礎的な操作の大半をマウスやタッチスクリーンなどによる画面上の位置の指示により行うことができるもの。

参考:GUI(グラフィカルユーザーインターフェース)とは – IT用語辞典 e-Words

GUIとは、グラフィカルユーザーインターフェース(Graphical User Interface)の略で、アイコンやカーソル、メニューやボタンなどのシンボリックな図形に文字情報を組み合わせてビジュアル化されたものを意味します。

WindowsやMacなどのOSでも、例えばフォルダやゴミ箱などグラフィカルなアイコンがあるため、
使用に不慣れな人でも「こういうことかな」と直感で理解して使用することができますね。
言うなればわかりやすさの実現です。

UXデザイン

UIデザインの次はUXデザインのお話です。

UXとは、ユーザーエクスペリエンス(User eXperience)の略で、
ユーザーが製品・システム・サービスを通して得られる体験のことです。

その体験をできる限り良質なものにできる様に設計するのがUXデザインと言えるでしょう。

UXとは、ある製品やサービスとの関わりを通じて利用者が得る体験およびその印象の総体。使いやすさのような個別の性質や要素だけでなく、利用者と対象物の出会いから別れまでの間に生まれる経験の全体が含まれる。

参考:UX(ユーザーエクスペリエンス)とは – IT用語辞典 e-Words

UIに比べるとより抽象的な「体験」を指したモノになりますが、
一般的にはUXの目的の中の一つがUIであると考えるとわかりやすいです。

当然、ユーザーには良質な心地よい体験をしてもらうのが目的であり、
そのために、より使いやすさやわかりやすさを実現する設計をする必要があります。

またUXの場合、ユーザー側の環境に大きく左右されます。
参考サイトにも掲載されていますが、制作側でのUX制御には限界があります。
だからこそ良質なUIデザインによってできる限り良質なUXデザインを心がけたいですね。

以下のページが非常にわかりやすくまとめられています。

UXとは、「User Experience(ユーザエクスペリエンス)」の略であり、ユーザー体験のことです。つまり、UXデザインとは、ユーザー体験をデザインすることを意味します。

では、体験をデザインするとはどういうことでしょうか。

例えば、両親が子供にクリスマスプレゼントをあげるシナリオには、デザインされた体験が詰まっています。

多くの家庭では、クリスマスの時期に下記のような行いがあるかと思います。

・クリスマスが近づくと、家の中の飾り付けをする
・クリスマス・イブの夜に、ケーキや食事を用意してパーティーをする
・子供が、プレゼントをもらうための靴下を枕元に置いて寝る
・子供が寝ている間に、両親がそっと枕元の靴下にプレゼントを入れる
・子供が朝目覚めると、靴下の中にプレゼントが入っている

子供がプレゼントを貰いたいという欲求を満たすだけであれば、このような行いがなくても、両親がクリスマスの朝に子供にプレゼントを手渡しすれば実現できます。しかし、それだけではクリスマスプレゼントを貰うという子供の欲求は満たされません。子供にとってクリスマスプレゼントはサンタさんからの贈り物であり、サンタさんから貰って初めて、クリスマスプレゼントを貰いたいという欲求が満たされます。

そのために、クリスマスの演出によって、あたかもサンタさんからクリスマスプレゼントを貰ったような感覚を、子供に提供しているのです。それが体験をデザインするということです。クリスマスプレゼントの演出では、下図のように体験がデザインされているのです。

参考:UXデザインとは ~ 身近な事例から理解する ~|最先端のUXデザイン論 | アプリ戦略大学

ユーザビリティ

いきなりですが・・・

例えばオンラインショップでの買い物だと、
どれだけ早く欲しいものが見つかって、どれだけスムーズに購入ができるかが重要ですよね?

例えば家のトイレが水漏れしていたら、
早く直さないと家が水浸しになっちゃうんだから、どれだけ早く業者に連絡できるかが重要ですよね?

今度は「どれだけスムーズにゴールに辿り着けるか」の話。

ユーザビリティとは、機器やソフトウェア、Webサイトなどの使いやすさ、使い勝手のこと。利用者が対象を操作して目的を達するまでの間に、どのくらい迷ったり間違えたりストレスを感じたりすることなく使用できるかを表す概念である。

参考:ユーザビリティ(使用性)とは – IT用語辞典 e-Words

ユーザビリティに関しては比較的耳にする機会が多いと思いますが、
いわば目的達成までの道筋がどれだけ容易であるかを示した指標ですね。

「どこを見ればいいんだろう?」とサイト内を探し回ったり・・・
「わかんないから戻ろう」と「戻るボタン」で前のページに戻ったり・・・

迷わせてしまう作りは「ユーザビリティが低い」と考え、
迷わせない作りは「ユーザビリティが高い」と考えてください。

さらにウェブの場合は以下の部分がわかりやすいかと思います。
ウェブの場合のユーザビリティはウェブユーザビリティと呼称されていますね。

WebサイトやWebページ、Webシステム(WebアプリケーションやWebサービス)の使いやすさ、分かりやすさをWebユーザビリティという。

Webサイトを訪れた閲覧者が目的の情報にたどり着いたり、目的の操作や手続きを達成するのに、どれだけ迷わず快適に行うことができるかを表す。サイトの構造や現在位置、どこを操作すればどこへ移動するのかなどが容易に理解でき、最低限の効率的な操作で目的の情報や手続きに到達できる、といった点が重要となる。

参考:ユーザビリティ(使用性)とは – IT用語辞典 e-Words

ユーザビリティは人ぞれぞれ

サイトの種類や訪問者の目的、主な対象機器やソフトウェア(パソコンかスマートフォンか)などの違いによってどのような作りが好ましいかは異なり、ある環境では好ましい要素が別の状況や利用者では無効であったり使いにくい場合(マウスオーバーポップアップや固定表示メニューなど)もある。

参考:ユーザビリティ(使用性)とは – IT用語辞典 e-Words

上記の通り、サイトの種別やユーザーが何を目的に訪問しているかによって、
サイトの構造や作りの良し悪しが変化するため非常に厄介です。

デザインラフを描き始めた「情ビのサイトのラフを描いてみよう(3点のポイント編)」で、
3つのポイントに書いたターゲットユーザーの定義をしっかりと行うのはこのためですね。
適当に書いちゃったらメインターゲットの傾向なんて対策できるはずがありません。

ユーザビリティを向上させるには

ユーザビリティ向上のためによく言われる一般的な要素としては、サイト内で一貫性があり見やすく整理されたメニューやナビゲーション要素、主題がひと目で分かるページタイトル(title要素)や表題、見出し、リンク先が明確に分かる配色やリンクテキスト、現在位置が容易に把握できるパンくずリストなどの要素、サイト全体が俯瞰できるサイトマップ、キーワードでサイト内のページを探せる全文検索フォームなどがある。

参考:ユーザビリティ(使用性)とは – IT用語辞典 e-Words

ここでレイアウトの講義で解説した「レイアウトの手法・コツ④ 4つの基本的なルール」および配色の講義で解説した「配色の基本は3つの色」の内容が活きてきますね。

ユーザビリティテスト・アクセス解析

Webユーザビリティの確認のためには、ソフトウェアなどの場合と同じように、想定利用者の協力を得て実際にいくつかのシナリオに従って目的を達成するまで操作してもらい、その様子を記録・観察したり意見を聞くといったユーザビリティテストを行うのが有効である。また、アクセス解析ソフト・サービスなどを利用して、実際の訪問者のページ間の遷移やリンクのクリック状況などを計測し、サイト内で想定した通りの人の流れが生じているか確認する手法もある。

参考:ユーザビリティ(使用性)とは – IT用語辞典 e-Words

実際に訪問してくれるであろうメインターゲットは3つのポイントにまとめていますが、
似たユーザーに協力してもらい、実際の使用の様子の観察を行ったり使用した感想を聞いたりといった、
実測のユーザビリティのテストを行うことがあります。

これは運用前のテスト段階で行うことがほとんどであり、
テストの結果によってさまざまな修正の必要が生じることもあります。
ウェブサイトがよりよい結果を出すために必要な工程です。

また公開後に行う運用業務の一つとして、Google Analyticsなどの解析ツールを使用し、
訪問者は何を使ってどこのページに辿り着き、どこから出て行ったのか?などの情報を得て、
見えてきた結果と照らし合わせ、ウェブサイト改善のためにさらなる修正を行うことがあります。

アクセシビリティ

一方、身体機能が様々な状態にある人が、どのくらいWebサイト上の情報にたどり着いたり内容に触れることができるかを表す概念を「Webアクセシビリティ」(Web accesibility)という。情報への到達や機能の利用が可能である度合いを意味し、利用しやすさであるユーザビリティとは区別される。まず前提としてアクセシビリティが確保された上で、ユーザビリティの高低が問題となる。

参考:ユーザビリティ(使用性)とは – IT用語辞典 e-Words

最後にアクセシビリティに関してです。

ユーザビリティが「どれだけスムーズか」だとすれば、
アクセシビリティは「どれだけ可能か」といった意味になります。

参考サイトにもありますが、アクセシビリティは最低限必要なものの一つであり、
その上でユーザビリティを向上させることが重要になりますね。

まとめ

UIデザイン・UXデザイン・ユーザビリティ

UIデザイン・UXデザイン・ユーザビリティとそれぞれに解説を行いました。
それぞれをワードとして聞いたことくらいはあるかもしれませんが、
ユーザー側の立場だったらそれほど馴染みはないですよね。

ウェブサイトデザインだけではなくアプリなどの場合でも、
全体からパーツに至るまでのデザインやレイアウト・配色はこういったことを考えて行います。

どれも概念としてはかなり早い段階で存在していたので、
今後も重要な項目であることは変わらないのだろうと思います。

その中でデザイナーがどれだけ自分の爪痕を残せるかが、
どれだけそのデザインを楽しめるかにつながりますね。

2021年に流行するデザインの最新トレンド

今回のUI・UX・ユーザビリティの内容とは違うんですが、
皆さんと一緒に見ておきたい記事を紹介しておきます。

参考:2021年に流行するWebデザインの最新トレンド12個まとめ | Web Design Trends
参考:2021年に流行するグラフィックデザインの最新トレンド12個まとめ | Web Design Trends
参考:2021年の流行色/トレンドカラーは3色!選出理由や組み合わせ方法も【アルティメットグレイ/イルミネイティング/ゼロホワイト】 | Workship MAGAZINE(ワークシップマガジン)

「今年の流行は」といった情報は毎年必ず出てきますので時間があったら見ておきましょう。

次回の準備(課題用紙の印刷)

さて次回以降、どのタイミングになるのかはまだわかりませんが、
ウェブサイトのロゴ(シンボルマーク)の制作を行っていきたいと思います。
次回以降、課題のやり方やコツを解説していきますね。

今回は解説を行いませんが、以下から課題ファイルをダウンロード・印刷しておきましょう。

WebデザインB ロゴデザイン課題用紙

IDとPASSは例のアレですが、Google Classroomの掲示板に書いておきます。

第05回課題

今回こそこれを紹介したい・・・!!(時間残ってるかな泣)

第05回でみなさんが提出してくれた課題をまとめています。
時間の関係上、全てを紹介することはできないですが、気になったものを強調しています。

カテゴリ:Webマガジン

みんなの発酵BLEND

一目見て何のサイトかわかりやすいと思いました。
発酵に対して詳しく書かれているので、わざわざ検索しなくてもこのサイトを見れば発酵のことがすべてわかりそうな気がします。
いろいろな写真が使われているので、見ていても飽きないし面白いです。

ニュー北九州シティ

イラストがおしゃれで可愛いのでいいと思いました。
動画がたくさん載っているので、どんなことをしているかが詳しく知れると思います。
北九州のことを調べてもあまり詳しく載っていないかもしれないけど、このサイトを見ればわかるのでとてもいいです。

オオサカマニア

まず、デザインが華やかだけど昔感のある絵がいいと思いました。操作してみとマウスの表示が変わっていて面白いと思いました。
左下にページ数も表示されていたのであとどのくらいあるのかが分かり飽きずに見ることが出来ると思いました。項目ごとのページでは、メインのページとは違い落ち着いたデザインだったので文章も読みやすかったです。

dancyu

写真の料理がとてもおいしそうだった。写真の配置がよく、興味を持ちやすかったです。マウスが上に行くと写真が拡大されるのでとても分かりやすかったです。
レシピでは、工程の見出しのようなものが大きく表示されていてとても分かりやすかったです。また、そのレシピの連載のページにもつながる表示があったため、他のレシピも見つけやすいと思いました。

ポmagazine

京都は観光に行きたいところ1番なので選びました。京都の観光をこのサイトだけでわかるのはありがたいなと思ったため。

最初はデザインがポップで可愛いけど見にくそうと思った。しかしそんなこともなく、見やすくて頭に入りやすいサイトだった。一番目に選出したサイトと違い、こっちのほうが印象には残りやすいかなと思う。
そして、Twitterもただのアイコンではなく、ポストの上に止まっている青い鳥のイラストをクリックするとTwitterのサイトに飛べるシステムや、「最近の噂」コーナーの写真にカーソルを持っていくと写真からイラストが浮き出てくるシステムは、最初すごく驚いて衝動的に全ての写真を見るきっかけになったので上手い方法だと思う。
遊び心のあるサイトでもあったので印象に残りやすく飽きない、楽しい!と思わせるデザインが参考にもなった。

TALKING ultrasuede®

色んなサイトを見たなかで、一番文章がシンプルで短く頭に入りやすく、見やすかった。無意識に最後まで見ていた。
文章と次の文章との間隔も広く、ゆとりがあって目も疲れないシンプルな、しかし写真などオシャレなデザインが気に入った。
個人的に好きなデザインがシンプルなものが好きなのかもしれないが、それでもこのサイトが一番見やすくて飽きないサイトだったから選出した。

カテゴリ:ギャラリー・ポートフォリオサイト

Ittetsu Matsuoka

トップページは「Work」と「About」の二項目しかなく至ってシンプルなつくりだが、一見乱雑に配置されているように感じる写真が、スクロールに合わせて不規則な動きをするので、スクロールが止められず、惹かれた。このサイトの場合、見せたいものが写真なので、その他をシンプルにすることで、より写真に目を向けることができるためよかった。

YOSHIHIKO UEDA

トップページの項目やポートフォリオのページの写真にカーソルを持っていくと音が鳴るようになっていて面白かった。その他にも、写真が自由に流れていくような画面であったり、カーソルをしばらく写真の上に置いておくと写真の撮影地ごとに分かれたページに飛べる工夫がされていたのに惹かれた。

Mireia Ruiz

マウスを動かしたら、動かした方へページが動いていくのがとても面白いなと思いました。また、自分の作品を並べてマウスで気になった作品を選んで見れるようになっているのも良いなと思いました。ロード中の砂時計のアイコンもとても良いと思いました。

kuribayashi Takumi Portfolio

まず最初に思ったのは、キーワードとなる文字を大きくしていて見やすいなと思いました。その文字を押すとそのことに関しての詳しい内容が出てくるのも良いなと思いました。また背景の雪の画像が動いているのも雰囲気があって良いと思いました。また、メールフォームが手紙の形になっていてクリックすると開いてメールを送れるようにしているのも面白いなと思いました。

dep MANEGEMENT(デップマネージメント)

デザインがシンプルで見やすいが、名前の部分が透明になっており、後ろ側で何かが流れていてこだわりを感じた。そして、名前部分にカーソルを合わせると、白黒反転して後ろ側でポートフォリオが流れ出す。この元はシンプルなデザインだけど、ある操作をすることによって派手なデザインに変化するのは、個人的に閲覧しやすいサイトだと感じた。
また、クリックするとサイト用のポインターに変化が起こるのは素敵だし、メニューにカーソルを合わせると地味に文字がチカチカしたりなど、細かい部分にもデザインが施されていて飽きることがなかった。
このようなデザインが良いと感じ、選出した。

Victoria Spicer

ページが表示された画面で真ん中より右にポインターを動かすとカーソルが右矢印に、真ん中より左にポインターを動かすとカーソルが左矢印に変化したことが斬新でこのサイトに興味を持った。クリックすると、矢印の方向に画像がスクロールするだけだったが、凄く面白いと感じた。
また、ページの下のほうにある英語の文章の中に小さい画像が驚いた。画像にカーソルを合わせると、少しだけ大きくなり、消えたり現れたりする仕組みだった。私は英語を読むことは苦手だけど、この文章の間にある画像を見ることで、何を書いているか少しだけ分かったような気がした。
このような今まで見たことないデザインのあるウェブページだったので、選出した。

tashi design

スクロールしていくと背景が見れるところが途中に出てきて背景の画像が変わっていたり、所々にあるイラストがアニメみたいに動いたりしていてわくわくしたから。

Jameen Tarlier Portfolio

項目にカーソルをあわせるとベージュのような色から黒色に変わって右側に2~3枚のそれぞれの項目ごとにおしゃれな画像がのっていて惹かれた。

カテゴリ:リクルート・採用サイト

丸千千代田水産株式会社 recruiting site

最初に閲覧したことを後悔するほど初見のインパクトがすごい。他のサイトを見ているときもこのサイトが忘れられなかった。スクロールアニメーションがあって見ていて楽しかった。
横スクロールで意外性があった。
「変化を楽しむ、商売を楽しむ」の通り社員さんのポーズやイラストに遊び心があって良いなと思った。

サマーインターシップ2023|新卒採用|オープンハウスグループ

ポップな感じで良かった。
サムネを見たときは、ごちゃごちゃしていて見にくいかと思ったけど、意外とそうでもなく、むしろ見やすかった。
使う色を3色に絞っていて統一感があった。
スクロールアニメーションがあってスクロールするのが楽しかった。
メリハリがあって良かった。

Chatwork Recruiting Site | 野心と確信。

スクロールするたびにたくさんのアニメーションを用いた文と画像が出てくるので、見ているだけでとても面白く、先を見たくなるなと感じたからです。
「Read more」というリンク先が各分野ごとに表示してあるので、気になると思った時にすぐにクリックして詳しく見ることができるという点もすごく良いと思いました。
また、一番上に出てくる「野心と確信。」という文字も、このサイトを開いた人が「これはどういう意味なのか」と気になって続きを見るきっかけにもつながるのではないかと感じました。

定期採用|フェリシモ採用情報|フェリシモ

一般的にはサイト中に写真を用いることが多いのに対して、このサイトは写真を用いず、イラストを用いているというところがとても面白く、私自身初めて見たので選出しました。
また、表紙がすごくシンプルなので、より何の会社なのかクリックして見たくなるのではないかなと感じました。
サイトをクリックした際に出てくる文字もサイトを開いた人が3行全部読めるように表示する長さを調整されているところもすごく良いなと感じました。
ピンクの丸が表紙の時点では何なのかわかりませんでしたが、サイトの中の人のイラストで丸が「人の心」を表しているということがわかるようになっていることも面白いなと思いました。

キャリア向けwebデレクター採用サイト

文字がそこまで多くなく見やすかったから。また四角でかくで格で囲ったりしてまとめられているので見やすかった。
シンプルすぎず派手過ぎず目を通しやすかったから。

株式会社LIFULL

トップに動画が流されており、スクロールしていくと背景が白、文字が黒、枠や重要な部分がオレンジになっておりシンプルで見やすかった。
また、閲覧者にとって見やすくなるよう工夫されていた。

東大病院産婦人科 研修医募集サイト

パット見て何についてなのか分かった。また、つらつらと文章が書かれておらず、閲覧者の目的ごとにリンクが分けられており、見やすいページだと感じた。

新卒採用サイト|静岡銀行

求人ように制作されたサイトのようです。銀行の堅いイメージを覆すようなポップなイラストに目を惹かれました。絵の具で塗られたようなカラフルな配色と多くないアクションがちょうど良いバランスだと感じました。他社と比べても一目で興味を持てるサイトだと思い選びました。

えがおグループ 新卒採用サイト

まとまった見やすいレイアウトだなと思いました。最初の読み込み画面が可愛らしかったのもポイントの一つです。動きなどは特にありませんが就活生が見たいところに辿り着ける分かりやすいサイトでした。フォントの違いや強弱が面白いと思いました。また最初に大きく出る笑顔の写真と背景のオレンジに活気を感じました。

D.A.Consortium RECRUIT SITE

マウスを動かすと背景の絵も一緒に動く、面白さがあった。最初は、メニューが英語表記だったので、わかりにくいなと感じたけどマウスを近づけると日本語表記に変わったのでそこがよかった。デザインもシンプルで見やすく、文字との統一感があってスラスラ読めた。

WOWOWリクルート2022 | 株式会社WOWOW

サイトを開いた瞬間、その会社ならではの言葉であったり、目指しているものが何なのか大きく書かれてあって印象に残った。
また、スクロールするとメニューごとに色分けされていたり、枠が振り分けられていて見やすいと感じた。

サマーインターンシップ2023|新卒採用|オープンハウスグループ

就活生と言うこともあり、「インターンシップ」という単語が目に飛び込んできたから。
サイトを開くと、赤や黄色を基調としていて、アグレッシブな印象を受け、インパクトがあったため。

採用情報|公文教育研究会

サイトを開くと、アニメーションで”スローガン””お知らせ”の順で表示され、動いて出てくるので目を引かれる=見てほしい順番で見てもらえるという方法を使っていて、注意を引かれたから。

リクナビ2023|インターンシップ・1day仕事体験情報・就活準備

就職活動でよくこのサイトをりようしていて見やすいし探しやすく誰もが愛用するサイトだとおもったから

マイナビ – 学生向け就職活動(就活)・就職情報サイト

リクナビと同じ選出理由で、個人的にはリクナビのほうがみやすくて好きだけどマイナビも就活の時に欠かせないサイトだとおもったから。

カテゴリ:サービスサイト

横田農場 おいしくて安全なお米の生産直売 茨城県龍ヶ崎市

サイトの名前通り開いたらお米のキャラクター出てきてわかりやすいです。そして選択が画像と共に横に横にスライドができそのスライドにはもっと見るなど詳細も知ることができます。

和歌山市にある小さな銭湯

このサイトのヘルプが常に左側にあります。そして大きく銭湯の画像が貼られその下に電話番号と営業時間が示されていました。開いたらすぐに自分が知りたいことが知れていいです。さらに最新情報のリンクもあるから常に最新の情報を知ることができます。

Oops

シンプルだけど、色遣いが面白かったから。また、病院っぽくない感じのサイトが気に入りました。

lili-chocone

トップページにあるお菓子が動かせるところに魅力を感じたから。また、私の好みの色を使っていてかわいいなと思ったから。写真のお菓子はフルーツだったりして色が鮮やか。イラストもあったりして女の子に人気のサイトになるのかなって思いました。

フルーツトマト専門農家|曽我農園の通販・オンラインショップ

1番売りたい商品をしっかりと主張しており、シンプルでとても分かりやすかったです。
たくさんの商品を売りたいからといって、煩雑にならべたり、情報量が多すぎてなにが売りたいのかがわからないということもなくトマトの魅力が簡単な説明でとても伝わり、ホームページもデザインがシンプルなのに綺麗でどのページに飛んでも初めての人にも簡単に使えるようにしていたのでとても良いと思いました。

スノーサンド(SNOWSAND)

初めにこのページを開くと売り出したい商品がぱっとでてきて、下にスクロールするとサービスしたいものの説明や情報や商品の特徴なども詳しくまとめてあるページもあり、価格や賞味期限なども書いてあって私たちが知りたい情報をここのページだけみればわかるという感じにしてくれているのでとても見ている側としてはありがたいなと思いました。
画像も見ただけで美味しそうなイメージを沸かしてくれ、シンプルな色使いで万人受けしそうなホームページだし、お問い合わせや細かいことまでしっかりと紹介しているのでとても魅力的なサイトだなと思いました。
あと最後にまたお会いしましょうと出てくるところが可愛らしかったです。

カテゴリ:ブランドサイト

美しさとは引き出すこと  HIK  公式サイト

化粧品が好きなため、このサイトを見つけて開いた時に、すごくシンプルな商品でも写真の撮り方によって使ってみたいと一瞬で思ったから。
ウェブサイトの写真も商品だけですごくシンプルなのに、影があることで商品がすごく魅力的に見え、その写真に惹かれたから。

GLAMPROOK 飯鋼高原|至れり尽くせりの贅沢なグランピング

最近グランピングをしているドラマをみて、そのグランピングシーンの景色に似ている写真ですごく綺麗だったから。
自然が好きで、今は色んなとこに巡ったりはできないけど、流れていくどの写真も魅力的で、行ってみたいと思える所やSNSで見たことのある写真ばかりだったから。

KATANism石川県小松市・能美市 産地のオンラインミュージアム

「クタニズムとは?」で日本語だけではなく英語も書いていて外国人にも読んでもらえるようにしているのがいいなとおもったから。
見ていてミュージアムっぽいウェブサイトだなと思い、またレイアウトが見やすく面白さもあっていいなと思ったからです。

西武ゆうえんち

今は令和だけど、昭和の古き良き街並みや熱気がとても楽しそうだから。画像も昭和っぽくまとまっているところもいいのかなと思いました。

南きりしま温泉

どんなところにあるのか惹かれたからです。動画が数パターンありすごいなと思いました。トップのページはシンプルにまとめられているのも良いと思いました。

カテゴリ:プロフィールサイト

End of the World | a new project by SEKAI NO OWARI

モノクロの雰囲気とアニメーションのかっこよさが好きだったので、選びました。 背景色をモノクロでまとめていることで、落ち着いて見え、かっこよさが出ていると思います。アニメーションを使っている部分と使っていない部分(情報系の部分)を分けていて、伝える部分と魅せる部分が分かれているので見た人が楽しみやすいと思いました。SNSのアカウントはスクロールしても付いてくるタイプで、一番下にサイトトップへ戻るボタンもあったので便利だと思いました。英語で書かれているため全世界の人が楽しめるのではないかな思いました。

Safari Riot : Noise | Award Winning Original Music & Interactive Audio Projects

ここまでのアニメーションに凝っているものがあるんだと思ったのと、色の使い方が好きだったので選びました。 背景が白で、文字が見やすく、青色がポイントだと思っていたけど、スクロールすると、文字に青色が入り、ポインタを合わせると、それぞれの文字で色や動画が流れる演出があってすごいと思いました。ポインタが青丸という部分も珍しいと思いました。トップページの文字をクリックすると、動画が流れて、ここでもポインタがListenととMuteになって、クリックすることで変化するのもすごいと思いました。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE