takashi178.meリニューアルしました(2014年版)

前回のリニューアルが2012年の「ポートフォリオサイトをリニューアルしました」なので、大体2年おきにやっているみたいですね。

ようやくスマホ対応しました

今回のリニューアルのテーマは「スマホ対応」と「コンテンツへのフォーカス」の2つです。 前者については読んでそのままですね。ポートフォリオサイトという性質上、PC環境で閲覧して頂くことが多いであろうとこれまで対応を先延ばしにしてきましたが、昨今のスマホアプリ・サイトの隆盛と、最近ブログ記事を書くことが増えてきた事もあり、SNS上でシェアした際にスマホ対応していた方がより多くの人に読んで頂けるかなと。 ただ、ロールオーバーアクションを多用してしまっていたり、PCでデザインを確定させてからスマホに落としこんだりと、今回はまだ「スマホファースト」には出来ていないですね。

コンテンツにフォーカスしました

こちらは2年前のリニューアルの時にも心がけていたはずのことだったのですが、まだ理解が浅かったためか徹底出来ていませんでした。 というのも、前回のリニューアル記事にて下記の問題点を自ら挙げているのですが、今振り返ると、いくつか問題を引き継いでしまっていたように思います。
  • 設計のデザインが出来ていなかった
    (制作実績より目立つ馬鹿みたいにデカイロゴ、サイト構造が分かりにくい記事紹介部分など)
  • トップ以外は見た目もおざなり
    (整列すら出来ていないWorksページ、それぞれ最適化がされてないアーカイブ・カテゴリ・記事詳細ページなど)
これは、肝心のサイトの「コンテンツ」を脇においたまま、コンテンツの枠・入れ物・土台であるサイト自体をデザインしてしまっていた、という問題が根底にあったように思います。 今回は「コンテンツを表示・操作するGUIではなく、コンテンツ自体をデザインする」という事を心がけました。その目的を達成できる選択肢は色々あったのかもしれませんが、今回は勉強も兼ねてbootstrap3をベースとし、フラットデザイン風なものを採用しました。

雑感

以前の制作フローは、Photoshopでひたすらデザイン案を作りこんでからそれをコーディングに落としこむ、というものだったのですが、今回は驚く程にPhotoshopに触りませんでした。 前述の「コンテンツ自体をデザインする」というのを重視していた為、Photoshopにコンテンツを持ち込むよりも、既にコンテンツがあるブラウザ上でデザインをしてしまった方が色々と都合が良かったこともあり。 Photoshopでコンテンツをデザインしようとすると、まず文章や画像をコピペしていくのが大変ですし、1画面分ずつしかデザインできませんし、画面遷移も確認できませんし…。 「画像作成・画面デザイン」ではなく「コンテンツデザイン」の為の何か良いツールは無いですかね。

コメントを残す

メールアドレスが公開されることはありません。