今回は、ブログの記事のアイキャッチ画像の流体シェイプをどうやって作ったのかを説明ます。
流体シェイプとは
2018年頃からWebデザインのトレンドとなっている流体シェイプ。「流体シェイプ」とは曲線で構成されている円・楕円・多角形のことを指します。粘度が高めの液体を垂らしたときの形状みたいなイメージです。柔らかめのスライムを俯瞰してみた感じでしょうか？
流体シェイプが流行る前のWebサイトは、直線的な線や図形を多用するデザインしたフラットデザインを採用することが多く、シンプルで無機質なWebサイトが多かったような気がしていて、流体シェイプのトレンド入りは印象的でしたね。確か同時期にパステルカラーなどの優しい色味や複数の色から構成されるグラデーションがトレンドになったような気がしています。
流体シェイプを作れるツール「Blobmaker」
さて本題に戻りますが、この流体シェイプの制作方法を検索すると色々ヒットするのですが、その中で一番早い・かんたん・便利の三拍子が揃っているツールを見つけました。それが「Blobmaker」。Webブラウザ上で流体シェイプを作ってくれるジェネレーターツール。
「COMPLEXITY」をスライドすると多角形になり、「CONTRAST」のスライダーを右にスライドさせると流体の入射角（？）が鋭角になります。
「Product Hunt」で紹介されているGifアニメーションは古いバージョンのものらしく、最新のUIは以下。
基本的にはあまり変わっていないのですが、一番右側にあるサイコロアイコンをクリックすると再生成されます。
できあったデータはSVG形式でダウンロードするか、もしくはSVGのコードが表示されるので、それをコピーするかで取得できます。最初はどんな形が良いのか、「これだ！」っていう決め時が分かず、何回も調整してしまいがちなのですが、シェイプ自体を回転すると表情が変わるので、あんまり悩まくても意外と大丈夫です。
Webデザインのトレンドって誰が決めているの？
ふと思ったのですが、Webデザインのトレンドって誰が決めているのでしょうか。ファッションのトレンドは「インターカラー」（国際流行色委員会）が流行色を決めてから、どういったスタイルや素材を流行らせるのかなど、組織的なスキームが昔から存在しているわけですが、Webデザインはどうなのかなぁ。そういえば、パントンは「パントン・カラー・オブ・ザ・イヤー」でその年を表す色を毎年発表していますよね。
パントン・カラー・オブ・ザ・イヤー 2020
https://www.pantone-store.jp/coy2020/index.html
今年のカラーはクラッシックブルー。「落ち着き、信頼、つながりをもたらす安心感のある存在」だそうで、発表されたのは2019年12月なのですが、このコロナウイルス感染症拡大を予期していたかのようなテーマですね。ちなみに私は2019年の「リビング・コーラル」という色が好きでした。
Webサイトの場合は、技術の進化による表現の幅の広がりや、通信環境やデバイス・OSの技術・品質向上にも左右されるのと、進化のスピードが早いので、トレンドをトップダウンで決めるというよりは、自然発生的にボトムアップでトレンドが形成されることのほうが多いのかなぁ。
