YUIKO HAMADA'sportfolio site

works

LOL.blog

WEB / 2015.3- ( 2016.1 renewal )
LOL.blog
制作期間
2015.12-2016.1
担当範囲
すべて
使用ソフト・技術
IllustratorCS6 / PhotoshopCS6 / HTML5 / CSS3(scss) / jQuery / WordPress
URL
https://y-hmd.com/blog

制作背景

もともとはWebサイトのトレースをした後のメモ代わりに始めたブログですが、今は自分が学んだことやつまずいたこと、制作物の紹介などいろいろな記事を書いています。ここで紹介しているのは、自作したうちの2つ目のテーマです。今回は勉強を兼ねて、sass+gulp+MAMPで開発しました。

アイディア出し

テーマを作り直すにあたって、追加する機能などを書き出しました。
いろいろなブログを見て回り、気づいたのは記事にたどり着くことが多いということ。記事がシェアされたり、検索で引っかかったりすることが多い為、他の記事への導線をしっかり配置しておくべきだと思い、今回”関連する記事の表示/人気記事の表示”を取り入れました。

手書きワイヤーフレーム

それから、ブログのTOPへたどり着いた時にどんな記事を書いているのかわかりやすいように、記事をタイル状に配置しました。ここで、アイキャッチ画像の重要さを再確認しました。ただの画像ではなく、目を引くものでなければ意味がないので、毎回制作するようになりました。

スマホから見る方も多いので、モバイル対応もしています。今回もレスポンシブデザインになっています。PCでも幅を縮めるとご覧いただけます。

今後の目標はとにかくPV数を増やすことと、記事の更新頻度を上げること。

最初のテーマ

ちなみに最初のテーマは白黒+緑でパンダをイメージしたデザインでした。

最初のテーマについてはこちら

スクリーンショット

contact

お気軽に お問い合わせください

info@y-hmd.com