デザイン４原則：反復

学びのアウトプット

デザインの４原則の３つ目の「反復」
「反復（Repetition）」はデザイン内で特定の要素やスタイルを繰り返し使うことで、統一感や一貫性を生み出す手法。情報を整理し、目的を効果的に伝えるための強力なツール。

反復を活用するための具体的な方法は、フォーマットを統一する。
ほぼすべてのWebデザインで使われる基本中の基本といえる技術ということで、今回はニッスイフードグループさんのWebデザインを使って、「反復」を探してみることにしました。

https://www.nissui.co.jp/goodfoods_world/index.html

ニッスイグループ／Good Foods For YouのGood Foods World

スクロールしていると、旅をしているように感じられます。
デザイン全体の統一感はもちろんもこと、文章や情報ブロックの配置パターンが繰り返されているで、情報をよりスムーズに理解することができています。

各国の紹介の画像の構成も３分割で統一、反復されています。
さらにこの画像とコラムを反復させることで、リズム感があり、スクロールしやすい。

左側
背景、コラムのフォーマットも統一されており、文字のフォントやサイズ、ボタンのサイズとカラーも統一されています。＃１、＃２というコラムの番号、それぞれの国の紹介の食品も配置も統一されています。

右側
最初の概要説明の中にまとめたコラムが流れて出てくる仕様になっているが、そのフォーマットは、最後に全てのコラムがまとめて出てくる仕様と統一されています。CTAがスペースが小さいためか三角の記号へと変化していましたが、それも反復されています。

FVの下と、フッターの上を歩いているこのジャガイモのような子も、始まりは飛行機の上に、最後はラゲッジを引いて歩いている仕様になって、この子の登場も反復？なのか、気になりました（笑）
もっと気になったのは、この子は何なのか？（笑）
.
.
.
.
笑

Good For You のグッフーちゃんでした（笑）
https://www.nissui.co.jp/goodfoods_foryou/goofoo/index.html

旗を持っていたのは、添乗員的な役割だったのか。。
そして、しゃべるそうなのですが、声がさらに気になります。

まとめのアウトプット

グッフーちゃん情報で、最後少し「反復」の学習から外れてしまったようで、しかしある意味、反復されると自然と記憶に残ったり、印象を深めるという効果があるという良い例だった気もします。
「反復」こそ、Webサイトを設計するにおいて、とても大事な部分だと理解が深まりました。

P.S.
アメリカコラムが偶然にもシアトルだったことに、何だか親近感を感じたWebサイトでした。