officehojoのポートフォリオサイトを更新しました。デザインを新しい世代に変え、内容もミニマムに変更。シンプルにポートフォリオだけのサイトとして作り替えました。
今まで使っていたエフェクトも活かしつつ、新たなデザインも取り入れました。
目次
レイヤーデザインとスキューモーフィズム
ここ最近、奥行き感を楽しめるレイヤーデザインが気になっています。ずっとトレンドだったフラットデザインに飽きたのでしょうか。なんとなく立体感が欲しいんですよね。
フラットデザインの反対側にいるのが「スキューモーフィズム」と呼ばれる「現実にあるものを模倣したデザイン」になるのですが、その進化バージョンが「ニューモーフィズム」。エンボスのような質感です。
このレイヤーデザインとスキューモーフィズムを組み合わせ、ガラスの下を移動するロール紙のようなイメージで制作してみました。
前面に固定しているのが透明ガラスのようなテクスチャーで、iPadのようなデバイスのフレームをイメージしています。
左右に配置したメニューボタンは、家電のようにマウスホバー（タップ）で青く光り、ポコっと凹みます。この感覚が気持ちいい。
後ろに流れていくポートフォリオも、エンボス枠にはめたスクラップみたいな感じで掲示しています。なんか、博物館とか展示会とかで過去のバックナンバーを見る機械とかあるじゃないですか。あんなイメージです。
スマホ版はこんな具合で。
ボタンはハンバーガーメニューにしまわず、そのまま残してます。
毎回思うんですが、UI的にはモバイルファーストのために下側へ固定するメニューがいいと言われていますが、結構ブラウザ側のUIと被ってしまうので、扱い辛くないですか？下へ移動中に押せないとか、タップの2度手間になるとか。間違って違うボタン押してイラッとするとか。
かといって、画面が大きくなっている今、右上が正しい位置なのかという疑問もある。もはや片手では操作できなくなったのが2020年のスマホですし、一番いい場所というか、いい見せ方はどこなんだろうか。
とにかくワンアクションで移動できるというのは目標だったので、全部を画面の上に出して、操作できるようにしてみることに。戻るアイコンも使う人と使わない人がいるのでこっそりと。みんなブラウザの上をタップして戻りますよね？？
あとやり残したことといえば、画像をサイネージのように動画もしくはスライドにしたいことですかね。よりエンタメ性を増して、サイト丸ごとポートフォリオ化。ちょっと実験してみます。
そしてなぜか今、スケルトンが私の中でトレンドとなっております。
ガラスのようなテクスチャーを実現するCSS
Webデザインは、結局使いやすいかどうかが大事になってくるので、なかなか遊びができなくなりますよね。そんなときに使えるのがテクスチャーなのかなと思います。
プログラムを使うわけでもないので読み込み速度も安定、移動もスムーズ。長く使うサイトだと、派手なデザインは飽きに繋がりますし、単純に綺麗なサイト構成は大事なのかなと。
ということで今回は、スケルトンテクスチャーで遊んでみました。officehojoではシンプルにガラスのような透明感を作ってますが、色をつけてプラスチック的な遊びをしても面白いと思います。
透明感の錯覚を引き出すには、透け感を演出する影が重要！これは平面デザインと同じ考え方です。
CSSで再現するなら、影はbox-shadowかfilter: drop-shadow、影を乗算させる「mix-blend-mode: multiply」を使います。影とオブジェクトを分離させると、不透明のリアルフレームも作れます。
ガラスっぽくするなら、重なった部分を少しだけ暗くすればOK。
押したくなるボタン（ニューモーフィズム）
なんか、プチプチの感覚なんですが、押したくなるボタンってありますよね。このニューモーフィズムのボタンはかなり気持ち良くて、ペコってハマる感じが好きです。
これに色の点滅を加えると、さらに気持ちいい。フワッと沈んで点くライト。
これは「transition」で時間を刻んでます。ボタン要素に「transition: 0.3s」を指定すると、0.3秒でフワッと変化する。
ちなみにボタンのコードはこれです。（SCSS方式）
ボタンプロパティ{
width:50px;
height:50px;
border-radius:50%;
display:grid;
place-items:center;
background-color:#背景と同色に;
box-shadow:3px 3px 6px #b8b9be,-3px -3px 6px #fff;
border:1px solid #e9eaf1;
transition:0.3s;
&:hover{
color:#アイコン文字のライト色;
box-shadow:inset 2px 2px 5px #b8b9be,inset -3px -3px 7px #fff;
}
}友達に教えてもらったNeumorphism UIから拾いました。
レイヤードスタイルは「position」で作る
レイヤーというのは、重なりですね。CSSでは、「position」と「z-index」を使えば複数のレイヤーが作れます。
画面に固めるなら「position: fixed」、スクロールさせるなら「position: relative」か「position: absolute」。
位置は「top:10px」「left:10px」のように指定することができます。画面から数えたいなら「absolute」、親要素から数えたいなら「relative」。固定したいなら「fixed」。
そして、重なり順は「z-index:〇〇」で決めます。
通常、画面は「z-index: 0」の平面ですが、レイヤーを後ろに追加したいなら「z-index: -1」、前に追加したいなら「z-index: 1」で指定すると、奥行きが作れます。数値は10でも100でも自由に指定できます。
これを応用するといろんな表現ができそうですね。グラフィック的なものを作りたいならpositionは必須なのかもしれません。
WebデザインとUIとUX
Webデザインには、2つの考え方があると思います。
一つは、UIに特化した、使いやすくストレスのないサイトデザイン。（マイナスを生まないもの）
もう一つはUXに特化した、エンタメ性の強いサイトデザイン。（プラスに変えるもの）
オウンドメディアはUX特化型、アーンドメディアやペイドメディアはUI特化型が多い印象です。
最近の傾向だと、やはり感情に訴えかける戦略が目立つので、全体的にはUX推しなんでしょうね。ブランドやメディアによって使い分けが必要だと思いますが、やっぱ固定ファンを獲得するなら心の部分を満たすデザインが重要なんだと思います。
嫌われないデザインと、好かれるデザイン。みなさんはどっちが好きですか？
私はやっぱりアイコンとかイラストとかフレームとか、細かいところで作り手の愛情を感じるデザインが好きです。もちろん、判断基準は自分が好きか嫌いかです。笑