Adobe Portfolioでポートフォリオサイトをつくる

WPでサーバ借りるところからやろうと思ったけれど、あまりの手軽さに負けてぽちぽちやっています。

少し癖はあるけど、シンプルなものなら、慣れればサクサクっとつくれそう。

少しがんばれば、つくり込みもしやすいのではなかろうか。

もう少しきちんと情報を入れたら、こちらとも繋ぎたいです。

横からスライドする検索用メニューに使ったjQueryプラグイン

導線を明示して直帰率を20%くらい下げられた

自社で担当しているサイトのギャラリーページ的な場所を改修した。
やったことは大きくこの2点

1.単純に要素が並んでいる→いくつかのジャンルに分けて閲覧数の多いものを3点ずつ表示する

2.上部に検索窓がある→虫眼鏡アイコンをクリックするとジャンル、単語での検索ができるサイドバー(?)が右側から出現する

結果から言うと、直帰率を20%ほど下げることができた。
サービス立ち上げ当初はギャラリーの作品も多くなく、パッと一覧できる程度だったと思うが、点数が増えたことでユーザーが順路を判断できなかったのだろうと仮説を立て、
「人気」「よく見られている」ものをまず表示させることで導線をはっきりさせることができた。まず「全体像をあらかた把握したい」という気持ちはよくわかる。

サイドバー化で使用したjQueryプラグインの話

「Slidebars.js」というドロワーメニューのプラグインを使った。

まず「drower」が比較的人気というか簡単そう、と思ったので導入してみたけれど、カスタマイズのしにくさを感じて諦めた。
jQueryがさっと分かるならもう少し粘れたかもしれないが、クラスの名前ひとつ変えるのも時間がかかりそうだったのでパス。

…というのもサイトの構造上、ヘッダー部分はスライドさせないようにしたかった。
第二階層であるギャラリーページ内でのメニューであることを明示的にしたかったためである。

その点、Slidebars.jsはどこで何しているかが初心者の私にもわかりやすく、
サイトがレスポンシブなので、その辺りの調整もしやすかった。
サイドバーにtopの指定をつけて、ヘッダーはそのままにmainページのみがしゅぴっとスライドするかたちにすることができた。

正直、検索してまで何かを探しにきているユーザーはあまり多くないページなので、どちらかというと「検索メニューが必要な人にだけ見られれば良くなる」「ギャラリーページにはギャラリーの要素のみに集中してもらう」ためのサイドバー化でした。


・参考にさせていただきました。ありがとうございます
【jQuery】簡単に使えるドロワーメニューSlidebars.jsの使い方と、もうちょい気持ちいい動きにしてみた

はじめまして、人事からWebデザイナーになりたい新米です。

はじめまして、シマダ ミオと申します。

Webデザイナーを名乗りたい新米制作です。

自社Webサービスを運営する小さな企業に新卒で入社、人事職を数年。

昨年夏、まさかのガチ未経験でWeb制作部門へ異動になりました。

今やっていることをキーワードで出すなら

「デザイン」「コーディング」「ライティング」「メルマガ」「LP」「SNS」…など。

試行錯誤しつつ、腹をくくってこのシゴトでサバイブする所存です。

1年ほどが経ったので、きちんと記録を残したり、色々と幅を広げたい、深めたい、と思い、まずはブログを始めてみました。

Webデザイン・フロントエンド界隈の話題を中心に、つらつらと続けてたいです。

（なおぶっちゃけ、きっかけのひとつに今後のキャリアについて考えているから、というのもあります）

右も左も分からない新参者ですが、知ったかぶったりかっこつけたりせずに、素直に記していきたいと思っています。

至らない点もあると思いますが、どうぞよろしくお願いします。とりあえずアイコン画像考えたい。