「aquapple」バージョン9、細かいパーツをRetinaディスプレイに対応&お祝いイラストを頂きました

aquapple v9

2013年4月に当サイトをリニューアルしてから1ヶ月。サイトの外観は大きく変わりました[1]が、実は細かい部分の更新が追いついていませんでした。

新しくなった背景画像

それが、「アイコン画像」だったり「特定のdiv要素の背景画像」でした。ゴールデンウィークの前半を利用してこれらのパーツも合わせてリデザイン、同時にRetinaディスプレイに対応しました。

今回リデザインしたパーツの一部をご紹介します。

h4タグとh5タグ

h4タグとh5タグ

h4タグは従来、左側に背景画像を用いていましたが、今回から画像の使用をやめ、css3のlinear-gradientに切り替えました。

Amazonの商品紹介

Amazon

Amazonの商品紹介の背景画像もRetinaディスプレイに対応しました。ヘッダー部分の画像は2倍のサイズで作成し、background-sizeで縮小させています。細かいところですが「Amazon.co.jpで詳細を見る」ボタンも、Retinaディスプレイ対応になりました。

「詳細を見る」画像

この「詳細を見る」画像、従来のiPhone版は別ページで表示[2]していたため、iPhoneから当サイトを見ていた方にはお目にかかることの無いものだったのですが、バージョン9よりPC/iPhone問わず同じページを表示することになりましたので、ほぼ1から作り直しています。

codeタグの背景画像

codeタグ

各種codeタグの背景画像も、Retina対応&バージョン9のデザインに合わせた形にリニューアルしました。VBScriptとか最近久しく書いていない[3]ですねぇ。

関連するエントリー

関連するエントリー

関連するエントリーもサムネイルを実装したのに合わせて、背景画像を作成しました。これにより、タイトルだけでは伝わりにくかった概要がビジュアル的に伝わってくれることに期待します。

dtタグのアイコン

dtタグ

そして、dtタグの最初に付いていたこの緑色のアイコン。こちらもちゃっかりRetinaディスプレイをサポートしました。「たかが点」ですが「されど点」ですよね。気がつく人には気になる部分だと思います。

以上、ほんの一部ですが細かい変更点を紹介させていただきました。ほかにも30近いパーツをリデザインしています。

なお、今回の画像はすべてAdobe Fireworks CS6で作成しました。今回リデザインしたパーツの中にはMacromedia Fireworks MXという2002年製のソフトで作成して以来、ずいぶんと長い間メンテナンスされていないものもあり、懐かしさに浸りました。もうFireworksとの付き合いも10年を超えているんですねぇ(しみじみ

商品画像

そしてOne more thing…

イラストレーターの方にお祝いイラストを頂きました!

お祝いイラスト

バージョン9の目玉の一つ、マスコットキャラクター「あくあ りん」を描いていただいたイラストレータの方に、お祝いイラストを頂きました。抱きかかえられたりんちゃんがとってもキュートですね!素敵なイラスト、ありがとうございました!!

  1. 5年間お世話になった3カラム・リキッドレイアウトを撤廃しました [back]
  2. WPtouchプラグインを利用して別レイアウトで表示 [back]
  3. 実際、うちのサイトでもTvRock周りで数回取り上げた程度しかありませんね・・・ [back]
スポンサーリンク

この記事をシェアしてくださいねっ

このサイトが気に入ったらフォローしてください!