大阪のホームページ制作会社

世の中にはたくさんのサイトがあって様々なデザインがありますが、UI・UXという言葉があるように、どんなサイトでも見やすさや使いやすさ、またターゲットを捉えられているかなどは共通して求められる重要な部分です。

お洒落だけど操作しにくい、情報量が多すぎて最後まで読む気になれない、シンプルすぎてつまらない、などなど感じたことはありませんか？

私自身、作り手になった今、普段感じていたことを言語化してみて新たに気付いた点がたくさんありました。

今回はいろんな目線からいいなと思ったサイトのうち５つをご紹介します!

写真を “魅せる”

( https://www.kiyomizudera.or.jp/ )

清水寺の公式サイトです。
写真や動画の映像が綺麗なのでそれらを前面に活かし、フォントや縦書きの部分など和テイストもありつつ、時代に添ったお洒落なデザインです。
書体は明朝で小さめ、行間は広めで文字数も最小限、写真が主役の、「写真を魅せる」サイトという印象を受けます。
English設定にしてみるとトップは動画になっており、また違った印象になります。
スクロールでの文字の現れ方やホバー時の動きなどさりげなく上品で、歴史ある建造物を紹介するサイトにぴったりです。

・写真がとにかく綺麗
・余白、行間が広めで上品な印象
・デザインに色がほとんど使われておらず、写真が映える

物語のように読みやすい

( https://www.utopiaagriculture.com/ )

北海道にある、放牧酪農やお菓子を作っている会社です。
サイトはイラストがたくさん使われており、ファーストビューが表示される動きも、スクロールして現れる動きも物語を開くような印象を受けました。
酪農を行いながら北海道大学との共同研究や、その他様々な事業を行っており、その取り組みや事業が物語を読み進めるように難しくなく、すんなり入ってくる印象です。
様々な取り組みを行っているからこそ、それを伝えるのに定番のシンプルではなくてデザイン性の高いこのサイトの世界観がより、会社の理解を深められるように思いました。

・動きはあるが、アクションが大きすぎないので邪魔しない
・難しそうに思える事業内容も物語のように読みやすい
・下層ページへ遷移した時の動きがお洒落
・色合いのまとまりが綺麗
・世界観がありブランディングされたデザイン

綺麗だけど揃えすぎない

( https://www.craftscouncil.org.uk/ )

工芸品を紹介するサイトです。
デザインや色合いはとてもシンプルです。
クラフトストーリーのコンテンツ部は、画像サイズはバラバラなのに余白や文字の行間が綺麗なので複雑に見えず、少し動きも出て単調にならずに見やすい印象です。また、メニューはPCでもスマホでもバーガーメニューなのでファーストビューもスッキリしており、同じスライドの動作で横から現れます。
シンプルなサイト作りでは全てをきっちり整列しがちですが、余白や行間のルールを作って守りながら少し崩すことで、モーションがなくても動きのあるデザインを作れます。

・余白の取り方が綺麗
・最低限の文字量で写真が際立つ
・投稿する画像サイズによってリズムが生まれる

ひとくせあるシンプル

( https://www.everyday-needs.com/ )

生活雑貨を販売しているサイトです。
シンプルにコーポレートカラーやキーカラーを使用するデザインで参考にしたいと思いました。
定番の、無彩色×ワンカラーの色使いは簡単なようで同じデザインが生まれやすいのが悩みどころです。
このサイトではスクロールすると途中に背景色が現れ写真にもオーバーレイされて、ホバー時に本来の色に変わる動きをします。
また右下に「アクセシビリティオプション」が設置されており、そのメニュー内容も充実していて誰にでも優しいユニバーサルデザインとなっています。

・文字や画像の配置でオシャレに見せている
・余白が広く、雑誌のようなデザイン
・アクセシビリティのランゲージも豊富

とことん思い切る

( https://www2.mejiro.ac.jp/univ/mejinavi2021/ )

目白大学の入学予定者（希望者）向けサイト。
大学の公式サイトや、入学者向け紹介サイトなど、人や校舎などの写真が多いイメージでしたが、いろんなサイトを調べていくうちに、最近はイラストやイラストのアニメーションが多いことがわかってきました。このサイトでは圧倒的にアニメーションが多く使用されています。
在学生のインタビュー数も多く、何が学べて、どんな人達がいて、どんな学校生活を送っているんだろう？ということが多方面から知れてイメージがつきやすいことや、SNSを見る感覚で在校生の日常が見えるところがターゲットに合っているなと感じました。
企業と違い、学生の観覧が主なサイトですから、開いてまず純粋にワクワクし、どのページも読みたくなる気持ちにさせることが大切なんだと感じたデザインでした。

・インパクトが強く、ターゲットに合ったデザイン、仕組みがされている
・他の大学（競合他社）と差をつけている
・各コンテンツごとにデザイン（や動き）は違うが統一感がある

まとめ

いかがでしたか？
なんかこのサイトいいな、読みやすいな、わかりやすいな、と感じるものには文章や図の力だけでなく、デザインにおける配置や余白、カラー、モーションなど、様々な工夫が考えられています。
アンジップではUI・UXデザインはもちろん、自社でシステム開発も行っているため、クライアント様のご要望をより良い形にしていくことができます。
小さなご相談でもまずはお気軽にご連絡ください！