
I LOVE LUI
制作概要 そろそろCSS3やBarba.jsも熟してきたと感じたのと、Photoshopもとても便利な機能が増えたので昔作ったことのある「腐食デザ …
制作概要
そろそろCSS3やBarba.jsも熟してきたと感じたのと、Photoshopもとても便利な機能が増えたので昔作ったことのある「腐食デザイン」をそろそろ復活させようか・・とポートフォリオサイト(https://lui-design.tokyo/hide)をリニューアルしました。タイトルやコーディングはSEO対策低めな部分は承知の上です。使用したものも画像素材がゴテゴテしているわりに普通な感じです。
リストにするとなんかすごいですよね、こういうのって・・。
ですが、今回Barba.js(しかもV2で)とwordpressの導入がメインです。とはいえ、いろいろな細かいコンフィグはしていません。
I LOVE LUCY
10年くらい前に「i love lucy」をテーマにデザインをしたことがあります。それをリメイクするべく無料素材の花を切り取って並べる作業からはじめました。昔はパスできれいに切り取っていたのですがPhotoshopの「被写体を選択」が一瞬なのですべてその機能で完結できました。昔は花の撮影などを含んでも2日位かかっていたのに・・。
CC以前のバージョンではスマートオブジェクトもなかったので本当に大変でした。いまでは切り取りもファイル管理もとてつもなく楽になったのでPhotoshop上での生花も作業がはかどりました(笑)。
ひとつのPSDにすべての素材を詰め込んだところです。
Barba.jsによる画面遷移
Barba.jsもV2になったので使い勝手が良くなったので導入しました。
こちらも昔につくったPjaxサイト以来、メンテナンスの面倒さから避けてきたのですが、一度しっかりとwordpressに組み込んでみたかったのでいい勉強になりました。
・・とはいえ、ページローディングとしては機能させていませんが・・。
ページはもちろんレスポンシブです。
シンプルなサイトデザインではないため、グリッド状態がわかりづらいかもしれませんがMaterializecssのグリッドシステム通りに組んでるので難しいことはしていません。
また、「読みづらさ」「探しづらさ」も考慮しました(したつもりです)。無駄な装飾が多いため、「(探す)ワクワク感」と「(クリックする)ワクワク感」という部分でカバーした(つもり)です。Youtubeの動画をメニューのトリガーにするのはクライアントワークではなかなかできそうもないことですが(笑)。
Webデザインは「シンプル」で「軽く」「SEOに強く」というのが一般的な制作の基本ではあるのですが、いろいろ自由に作ってしまいました。製作期間も半月程度で仕上げてしまったのでこれから徐々に育てていければと思います。
2019 / Webデザイン
Lui Design