ブログリニューアルのお知らせ

52Thumb

2013年9月以来、2回目のブログリニューアルをしたので、ご報告です。

前回のリニューアル時と同様、改修した理由や制作のポイントについて書いておきたいと思います。

リニューアルした理由

一番最初に作ったのはほぼwordpressの勉強のためのサンプルでした。
その後、webデザイナーとして就活するため、ポートフォリオの一つとして提出する目的で、最初のリニューアルをしました。

一回目のリニューアルについてはこちらの記事に書いてます。
『ブログリニューアルのお知らせ』

見た目はこんな感じ(カンプ画像)。

52-01

約2年半ぶりに作り直した理由をまとめると

  • 全体的な作りに不満がでてきたため
  • html5ではなく、スマホも未対応だったため
  • コンテンツを刷新するため
  • 制作の勉強のため

になります。

①全体的な作りに不満がでてきたため

やはり2年経つとデザイン的にもトレンドにそぐわないと感じる部分がでてきました。
また、以前は完全に素人の時に作ったので色々と至らないと感じるようにもなってきました。

あとは単純に飽きがきたというのもあります。

②html5ではなく、スマホも未対応だったため

これも前回の制作時には視野に入ってなかったポイントでした。

今はhtml5/スマホ対応が完全に標準になってきたため、そろそろ自分も対応しなければなと。(そろそろって遅すぎですが、リニューアルに着手したのは2015年1月でした…)

ただ、コンテンツ的にはwebデザインのトピックが中心で、基本的にPCで見てもらうことを想定しています。

実際解析を見ても今だに8割以上PCで、おそらく作業中わからないことを検索してヒットする方が多そうです。

昨年は更新がだいぶ滞っていたんですが、今後も同様の記事を伸ばしていきたいと思ってるので、力の入れ具合としてはPCファーストで「一応レスポンシブにした」という感じではあります。

なので、「最適化」というより、他デバイスでも操作しにくくない程度に、を意識して作りました。

③コンテンツを刷新するため

前回は就活のためだったので、ポートフォリオページを用意。

そこで更新する作品もなかなかない状態だったので削除し、代わりにwebツールのブックマークとデザインギャラリーを設けました。

④フロントエンド面の技術の勉強のため

普段デザインの割合が大きいので、レスポンシブ/jQuery/wordpressの練習のため、というのも大きな理由でした。

そのため、「作りやすさ」とか「効率」を優先させないで、あえて手間がかかる作りにしてる所もあります。

検索フォームのクリックすると伸縮する仕様もカンプ作成時は作り方もわからなかったですし、特に必須の仕様でもなかったんですが、jQueryの勉強を兼ねて設置。

デザインギャラリーもWPの機能『カスタム投稿タイプ』を制作に盛り込むために作ったというのがあります。

画像のRetina対応もSVG/SVGスプライトを使ったり、メディアクエリでpixel-ratioで振り分けたり、このサイト内で色々試してます。

その結果、(インターバルを挟みつつ)制作期間1年を超えてしまい、さすがに後悔と反省をしつつ、、でも期待通り色々勉強になり収穫はあったなと思います。

思い通りの作りにできなく妥協している部分や十分検討していない箇所もありますが、まずは公開してから手を入れていきたいと思ってます。

制作のポイント

制作の際に意識したことです。

デザインコンセプト

コーディングや実装面では手間を掛けることを意識したのですが、逆にデザイン面で意識したのは『手間をかけないこと』。

なので、三角形のモチーフやテクスチャなど前回と同じものを使い回したり、ブログのレイアウトも概ね同じなど、基本的に省エネで作りました。

それでもただ個性のない簡素なデザインではつまらないし、わざわざオリジナルを作る意味がないから、何か自分なりのコンセプトが欲しいなと。

そこで考えたのは『古くならないデザイン』ということ。

webは流行り廃りのサイクルが早いけど、その中で古くなりにくいデザインって何だろう?というのを考えながら作りました。

ポイントとして思い至ったのは

  • トレンドに左右される表現はなるべく用いない /定番的な表現を中心にする
  • レトロなテイストにすると逆に古くならない

ということです。

流行りのあるアイコンやロゴはほぼ使わず、『category』や『tag』ではフォント自体をアイコン代わりにしてます。

レトロなテイストというのは元々『そういうテイストとして確立しているので』逆に古くならないというのがあると思います。

そこで例えば、『ABOUT』『CONTACT』ページのアイキャッチはタイプライターの画像を使いました。
これをmacbookの画像にしたりすると、おそらく数年で古く感じてしまうかと思います。

また、三角の幾何学模様のピンクと緑の配色も『レトロな配色』で検索して紹介されていた配色。
(サイドバーの見出しの)2本の罫線に文字を載せるあしらいも、あるレトロテイストなサイトで用いられていたのを参考にしてます。

コンテンツについて

大枠のコンテンツとしては『BLOG』と『BOOKMARKS』『DESIGN LIBRARY』の3つ。

『BLOG』では主にグラフィックソフトの使い方について、『BOOKMARKS』ではweb制作に役立つツール/サイト、『LIBRARY』では参考になるwebサイトの紹介、とより制作に役立つサイトとして充実したものになったかと思います。

『DESIGN LIBRARY』は、『(普通の)webサイト』と『LPサイト』の2つ。

自分の知る限り、普通のサイトのギャラリーの方が既存のものが充実しているので、今の所LPの方に力を入れていきたいと考えてます。
(分類の仕方とかも今後調整していきますので、長い目で見ていただけたらと。)

最後に

『制作に役たつサイトとして充実』と書きましたが、ここまでは準備にすぎず、本当に充実できたかは今後の更新にかかってます。

今までのBLOGの更新頻度から言うと、その点自分自身はなはだ不安ではありますが、、

でも、そこそこな時間と労力を割いて作ったので有効活用していきたいですね。
今後も自分と読んでくれた方の役にたつサイトとして成長させていきたいと思いますので、よろしくお願いします。