designのタグが付けられている記事の一覧です。

アイコン画像を丸くするのに、画像を編集しないで border-radius を使う理由っぽいものが見つかったのでメモ

以前、こんなツイートをしました。

border-radius で画像丸くするより、丸くした画像使った方がパフォーマンスいいんじゃないのかなあ。何でそうしないんだろう」という疑問。今回はこの疑問に対する答えの一つになりそうなものを見つけたので書き留めておきます。

先日、Tokyo WebGL Meetup のサイトで、border-radius でプロフィール画像を丸くしているのを見つけました(ちなみに、このイベントは iOS 8 から Safari で動くようになる WebGL をテーマにしたイベントです。iPhone の小さな画面の中で、3DCG 動くのヤバい)。プロフィール画像のソースを見てみたら、”pbs.twimg.com” を発見。ということは、 Twitter からプロフィール画像を持ってきてるのかな。

Twitter にアップするプロフィール画像は四角。Twitter からプロフィール画像を持ってくると、画像は四角のまま。それを丸く見せるには、border-radius を使う。というのが、最初の疑問の答えの一つになるんじゃないかなあ、と思いました。

余談ですが、「サイトで使うプロフィール画像を何で Twitter から持ってくるのか」も考えてみました。これは、プロフィール画像を変更した際に、自動で切り替わってくれるからではないでしょうか。サイト上のプロフィール画像が古いまんまということは無くなりそうです。これは、プロフィール画像を自分で上げずに Twitter から持ってくるメリットの一つになるのではないでしょうか。

ブログデザイン変更点メモ

このブログのデザインを少々変更したので、メモしておきます。何が問題でどう解決したかを書き記しす形で。これらのデザイン変更は少しずつ適用させていたのですが、今回で一応一段落できそうです。

問題点

このブログを読み返したり、他の方のブログを読んでいて「ここをこう直したいな」と思う箇所がいくつか出てきたので、まずそう思った箇所を書き出してみました。

  1. このブログに関するメタ情報が無いので、何のブログかわからない
  2. スマートフォンで見ると、ヘッダーが大きくてコンテンツの表示量が少なくなっている
  3. ヘッダー部分の背景テクスチャが、Retinaディスプレイの iPhone で見ると汚く見える
  4. PC で見た際に、横幅がかなりあるので目が疲れる

改善策

次に、上の段落で書きだした問題点を解消するための改善策を考えました。

問題点1.どこを探しても、このブログに関するメタ情報が無いので、何のブログかわからない
改善策1:フッターにブログの概要を掲載、新規に about ページの作成
問題点2.スマートフォンで見ると、ヘッダーが大きくてコンテンツの表示量が少なくなっている
改善策2:検索フォーム部分をフッターへ移動し、コンテンツの表示量を増やす
問題点3.ヘッダー部分の背景テクスチャが、Retinaディスプレイの iPhone で見ると汚く見える。
改善策3:Retina 対応のテクスチャに変更
問題点4. PC で見た際に、横幅がかなりあるので目が疲れる
改善策4:本文の max-width を縮小。line-height を調整して読みやすくする

上記のように改善することに決め、作業をはじめました。

改善策1:フッターにブログの概要を掲載、新規に about ページの作成

今回のデザイン変更以前、フッターには mzmjp.net と自分が利用している Webサービスのリンクが置いてあるだけでした。しかも、全部ロゴだけ。なので、このわかりづらい形式は廃止。このブログの概要文を載せました。

そして、aboutページを作成しました。aboutページには、このブログで何を書いているかや、自分の興味関心について少し書きました。文の最後に、最終更新日の日付を入れたのですが、これ入れると昔のインターネットっぽくなりますね。

この aboutページのリンクをフッターの概要文にリンク。これで、簡単にわかればいい人はフッターの概要文を見れば OK。もう少し知りたいと思ってくれた人は、概要文から aboutページに飛んでいただければ OK になりました。

改善策2:検索フォーム部分をフッターへ移動し、コンテンツの表示量を増やす

PC で見ている時は表示領域が大きいのであまり気にならなかったのですが、スマートフォン(私は iPhone 5 を所有しています)で見た際にヘッダーが大きく思えてきました。「なるべく早い段階でメインコンテンツが表示されるサイトが好き」という個人的な好みに則って改良しました。

まず、これが改良前の画面です(開発環境の画像なので、ブログのタイトルが本番のものと異なっています)。

改良前のこのブログを iPhone で見た画像

改良前は、ヘッダー部分の高さが 99px でした。ヘッダー内にある検索フォームをフッターに移動させてヘッダー部分を縮小したものが以下の画面です。

改良後のこのブログを iPhone で見た画像

この改良の結果、ヘッダーの高さを 39px まで抑えることができました。約60%減です。

そして、ヘッダーには検索ボタンのみを残しました。虫眼鏡アイコンは Webフォントです。fontello というサービスを使うと、各種 Webフォントサービスから自分が利用したいフォントだけをダウンロードすることができます。

検索ボタンは、虫眼鏡アイコンのみにせず、テキストも併記しました。理由は、もし何らかの理由で虫眼鏡アイコンが表示されなかった場合を想定したからです。虫眼鏡アイコンはあくまで「ここをクリックすれば検索できる」という認知を補助するためのものです。

この検索ボタンをクリックすると、フッターに移動した後、検索フォームにフォーカスがあたります。この動作は、jQuery を利用したスクリプトを書いて実装しました。

また、色が変わっている箇所全体がリンク範囲になっています。これは、他のサイトでリンクがフォントのみになっていて、ボタンのように見えていてもフォント以外の周辺領域はリンク範囲になっておらず、不便な思いをしたことがあるからです。

改善策3:Retina 対応のテクスチャに変更

テクスチャは Subtle Patterns から、Brilliant という素材をお借りして作りました。Photoshop で色を乗せただけです。

改善策4:本文の max-width を縮小。line-height を調整して読みやすくする

もともと、960 Grid System というフレームワークがお気に入りだったので、セオリー通りに本文の幅を 940px にしていたのですが、他のブログより目の横移動が激しいので、 820px まで max-width を狭めました。幅を狭めたら本文がこれまで以上に詰まって見えたので、本文の line-height を 1.4 から 1.7 に変更しました。

その他変更点

上記の改善策以外にも、いくつか変更を行いました。

1.JavaScript をインライン化した
上の改善策2のスクリプトを書いた時は、個別に js ファイルを設置していたのですが、Google の PageSpeed Insightsで「小さな JavaScript はインライン化しろ」と言われたので、その通りにしました。
2.Google の広告をはずした
記事と記事の間に表示させていた Google のテキスト広告をやめました。クリック率がそんなに良い訳でもないし、PageSpeed Insights でいつも広告関連の JavaScript について注意されるし、いいことないので外しました。
3.Syntax Highlighter やめた
Syntax Highlighter、高機能で良かったけど、必要なファイルとか指定が多い。 Google Code Prettify大変良い | Border/memo を以前読んで、目をつけていた Google Code Prettify を利用することにした。CSS が2個から1個に、JavaScript が5個から1個に。HTTPリクエスト数を減らして、パフォーマンス改善を図れます。cssscss ファイルにして、style.css@import した。
4.Google の Analytics をユニバーサル アナリティクスに変更
自分のサイト(このブログ含む)と Tumblr 2つ(リブログ+短文用無印良品用)に仕込んでいた Analytics をユニバーサルアナリティクスに変更しました。私の場合は、トラッキングコードを変更するだけで完了しました。Google 公式のヘルプを読んだのですが、いまいちわからなかったので、こちらのページを参考にさせていただきました → 【緊急解説】ひと目でわかる!ユニバーサル アナリティクスへのケース別アップグレード方法(第92回) | Web担当者Forum

1から3は、パフォーマンス(表示速度)のための施策です。現在、Webデザインで重要視する必要があるものは「アクセシビリティ」と「パフォーマンス」だと、私は思っています。ちなみに、Webアクセシビリティに関しては、書きかけの記事があります。

とりあえず完了&個人的な反省

これらの施策を持って、デザイン変更はとりあえず完了しました。また何か修正したい点が見つかったら、その都度短い記事を書いていくようにします。

今回の修正に関しては、修正作業そのものはそんなに時間かからなかったのに、この記事を見返しては直し見返しては直しを繰り返してしまった。デザイン修正はじめてから何ヶ月経ってしまったことか。

これからは、当然文章の質を上げることを忘れることなく、なおかつ更新量を増やすことも考えよう。どんなに体面(デザイン)を取り繕っても、中身(コンテンツ)が無きゃ誰も相手にしてくれませんよね。

ホバーしなくてもわかるようなリンクのデザインを心がける

最近、リンクをホバー ( :hover ) した時のアニメーションについてよく考えています。

CSS や JavaScript などが進化するにつれて、リンク箇所をマウスでホバーした時のアニメーションも多様になりました。古くは、文字色を変えたり少し上に動かしたりするぐらいでしたが、最近では、複雑なアニメーションをするものが増えてきました。Web制作の tips を載せているコリスさんでよくそういう記事を見ます。最近のアニメーションの例をコリスさんから引用してみます。

[CSS]サークル状のエレメントにかわいいアニメーションを与えるスタイルシート -CSS3 Circle Animation | コリス
引用元:[CSS]サークル状のエレメントにかわいいアニメーションを与えるスタイルシート -CSS3 Circle Animation | コリス

[JS]このホバーエフェクト楽しい!シールのようにぺらっとめくるスクリプト -Sticker.js | コリス
引用元:[JS]このホバーエフェクト楽しい!シールのようにぺらっとめくるスクリプト -Sticker.js | コリス

これらのアニメーションを見た時に、私は「凄いな」と思うと同時に「そもそもその動き必要なのかな」と思ってしまいました。ホバー時のアニメーションはリンク箇所であることをユーザーに伝える補助をするために存在すると私は考えていたので、最近のアニメーションはただ「魅せる」ためのものになっているのかなと。現に、急いでいる時にゆっくりアニメーションされると、とてもわずらわしく感じることが多々あります。

考え方は色々ありますし、「こういうアニメーションをもっと多用したい」という人もいらっしゃるでしょう。ですが、スマートフォンやタブレットなどのホバーが効かないデバイスの存在も考えると、私はアニメーションにはそこまで力を入れなくてもいいのではないかと考えます。アニメーションを頑張るよりは、ホバーしなくてもリンクであることがわかるデザインをすることの方が重要ではないかと考えました。