この記事はご覧のポートフォリオサイトのデザインを作成したときに、「心地よさ」を感じるサイトにしようと奮闘した記録と、完成後に初心に戻り、改めて考えるとおかしい場所を直そうという内容です。
このサイトは無印良品がモデルになっています。
いいえ。無印良品の公式サイトの話をしているわけではありません。無印良品そのもの、あるいはより正確にいうのであれば、無印良品の良品たちの中で個人的に最も好きな、この箱(正式名称をやわらかポリエチレンケースというそうです)がモデルです。
どういうことか? ー こういうことです。
無印良品
『無印良品』と聞いて、皆さんは何を思い浮かべますか。

僕は、少し高くて少し良いものというイメージを持ちます。他のお店で買えばもう少し安く買えるものを、あのシンプルさに引かれて無印良品で買ってしまう。そんな無印であることを前面に押し出したブランドなのかと思っていたらそうでもないそうなのです。
無印良品という矛盾
無印良品は1980年に、セゾングループのスーパー、西友のプライベートブランドとしてスタートしたものです。セゾングループはバブル崩壊を経て2001年に解体されていますが、西武百貨店を中心とした西武の流通グループのことで、全盛期はダイエーと並ぶ日本の大流通グループの1つでした。なお大手私鉄の西武鉄道にも西武という文字が付き全く無関係なわけではありませんが、資本関係などはありません。
西武百貨店といえば、老舗百貨店である高島屋や三越が日本の大手アパレルメーカーと取引するのと対抗し、戦後、欧州の高級ブランドの販売権を軒並み獲得し、いち早く取り扱いを行うことで対抗してきた百貨店です。
そんなセゾングループが絶頂の時に生み出したプライベートブランドが「ブランド消費のアンチテーゼ」を掲げる無印良品なのです。同じものであっても、ブランドのタグをつけると価格が2倍・3倍になること、他の人がブランド品を持っていることを羨み、ブランドであるが故に欲しがるブランド至上主義ではなく、本当に良いもの、そして普段使いできる値段が付けられた商品が無印良品の良品のコンセプトだそうです。
そこには当然自己否定とあえての矛盾があったのでしょうが、国内でもいち早く海外の高級ブランド商品の販売を始め、庶民に優雅さを提供した西武百貨店を持つセゾングループが、生み出した無印良品という消費者への新たな選択肢は、名前だけでなく正真正銘、無地であることを追求しているようです。
無印良品のタグ
そう考えると、この無印良品のタグへの見方も変わってきます。
個人的にはこのベージュのタグを見ると、無印良品の商品であることを暗にアピールする、どこか良いもの、あえてシンプルさを追求した高級品の証のような気がしますが、これは本当に商品の説明をするためのただの紙切れでしかないということです。
そう思って無印良品公式サイトのWhat is MUJI?を見てみると、説明が書いてありました。
「素材の選択」「工程の点検」「包装の簡略化」を通して商品を見つめ直しています。
たとえば、紙の原料であるパルプを漂白するプロセスを省略すると、紙はうすいベージュ色になります。
無印良品はそれをパッケージ素材やラベルなどに用いました。
タグがベージュであるのは、デザインではなく、無印の一貫したコンセプトである良いものを安い値段で提供するための「素材の選択」「工程の点検」によって生じた結果だったようです。本当に紙切れに必要な情報を書き殴っただけなのですね。
空っぽな器
さて、こうして生み出されている無印良品の"良品"には必然的な特徴が生まれます。それは単純さです。前述の無印良品のサイトには以下が書かれていました。
極めて合理的な生産工程から生まれた商品はとても簡潔です。
言わば「空っぽの器」のようなもの。単純であり空白であるからこそ、
あらゆる人々の思いを受け入れられる究極の自在性がそこに生まれます。
素材の選択、工程の点検、包装の簡略化といった合理的な生産工程から生まれる商品は単純である、単純である商品は汎用性高く究極な自在性が生まれ、どんな人が使ってもその人にあう商品になり得るということでしょうか。
無印らしさから学ぶ
ここで、「単純であり空白であるからこそ、あらゆる人々の思いを受け入れられる究極の自在性がそこに生まれる」という一文は、ブログサイトのデザインにも適用できる考えであるように思えます。それは、無印良品での「商品」を「ブログサイト」に、「人々の思い」を「ブログサイトに投稿していく記事」と読み替えれば、簡潔・単純である無印良品らしさを持つウェブデザインは、後に追加していくどのようなコンテンツにも、自在に適合し、無印良品の良品を家に持ち帰った時のような心地よさを生み出せるのではないかということです。
無印良品は商品のデザイナーを公式には発表しません。それは、無印良品がノーブランドさを求めていることの現れであり、あのデザイナーが作った商品だから買いたいという消費を求めているわけではないからです。
だからこそ、デザイナー本人によるデザインの解説は聞けませんが、商品から染み出る良さを感じ消費をすることの延長として、無印良品の良品の良さを独自に解釈し、汎用性の高いブログサイトを作れるのではないかという考えました。
サイトを作る
では、早速無印良品で買ってきたやわらかポリエチレンケースを隣に置きながら、Figmaでサイトのデザインを考えていきましょう。
背景
まず背景を考えます。
やわらかポリエチレンケースの色は白です。だから背景も白... というのは安直です。
よく見てください。やわらかポリエチレンケースは真っ白ではないのです。若干クリーム色系の色になっていて真っ白を避けていることが分かります。なぜか? これは僕の推測ですが、真っ白というのは人工的な色だからだと推測しました。人工物を離れた自然界で我々は漂白されたような真っ白なものを目にすることはあるのでしょうか?

自然界の白として最初に思いついたのがココナッツですが、これも完全な白ではないでしょう。
真っ白は、清潔感や高潔なイメージを与えますが、完全な白は同時に緊張感を与えます。やわらかポリエチレンケースが人間本来の心地よさを追求するために白を避けたのと同様に、サイトの背景は真っ白を避けた色にすることにしましょう。
ここでは、#FAFAFAにすることにしましょう。

ヘッダー・フッター
ヘッダーとフッターはどうするのが良いでしょうか。ヘッダーには必要最低限の情報を書くとするとこんな感じになります。これでいいでしょうか。

ヘッダーの構成やデザインについて、やわらかポリエチレンケースそのものには直接的なヒントはありません。しかしながら無印良品のコンセプトに重要なヒントがあるような気がします。