メインサイトをリニューアルしました(2013年)

サイトの運営上色々と気になる箇所が増えてきたのでリニューアルを実施しました。

リニューアル前とは次のような点が変わっています。

サイトのレイアウトに採用しているレスポンシブ機能の見直し

昨年に採用したレスポンシブ機能について、レイアウトの見直しを行いました。

今回はサイトのベースレイアウトに加えてコンテンツ単位でのレスポンシブ機能を強化したため、共通部分よりも独自部分が多くなっています。

全て書き出すと大変な量になるため、コンテンツ独自部分はブラウザ幅を縮める・色々な端末でアクセスするといった形を試して頂く事で説明とし、ここではベースレイアウトのみについて説明します。

新しいベースレイアウトの可変横幅は次のようになっています。

320~801ピクセル
スマートフォン・タブレットでの閲覧を想定したレイアウト。320ピクセル未満には縮小しません。
802~1042ピクセル
タブレット・パソコンでの閲覧を想定したレイアウト。ページによってサイドバーの有無などが異なる。1043ピクセル以上には拡大しません。

必要最低限を目指した結果、ベースは2タイプのみとすっきりした形に落ち着きました。

以前は対応していなかった最小幅320ピクセルからの閲覧に対応させましたので、縦持ちで閲覧できる端末が増えていますし、 最大幅についてもコンテンツの整理を行った結果、以前ほどの横幅が不要となったため、縮小して横長にならないようにしています。

サイト内テキストの標準フォントを変更

皆さんがサイトを閲覧した際に表示されるテキストフォントの優先順をサイト側で指定しているのですが、それを変更しました。

以前はメイリオ>ヒラギノ>MSPゴシックという設定でしたが、Mac OS X・iOS系はLucida・ヒラギノ系の方が綺麗なので、これらをメイリオより優先するようにしています。

Windows系は標準状態でLucida・ヒラギノ系が存在せず、最優先フォントが存在しない場合は次に優先指定されたフォントが適用されるため、Windows系ではメイリオ・MSPゴシック、Mac系ではLucida・ヒラギノがテキストフォントとして優先採用されます。 (標準状態で存在しないフォントを自分でインストールしている方は考慮していません。特にWindowsでヒラギノ系をインストールしている場合、見辛い可能性があります)

フォント確認用のサンプル

『サイト指定のFont』です。

『Lucida Grande』です。

『ヒラギノ角ゴ ProN W3』です。

『ヒラギノ角ゴ Pro W3』です。

『メイリオ』です。

『Helvetica』です。

『Verdana』です。

『Arial』です。

『Osaka』です。

『MS Pゴシック』です。

各コンテンツの整理およびUIの変更

次のような変更を行っています。

  • feedlyボタンの追加。
  • コンテンツ上部に設置していたソーシャルボタンをサイトヘッダに移動。
  • サイトメニューの掲示板およびリンクページをサイトフッタメニューに移動。
  • サイトフッタメニューに規約ページと運営者情報ページを統合したAboutページを新設。
  • サイトホームの新着情報および過去の新着情報に採用していたアコーディオン機能を廃止。
    これに伴い、スマートフォン・タブレットでサイトにアクセスした際はスクロールバーによるスクロール形式となるよう変更。

今回のリニューアルは以前のデザインをよりシンプルにし、各機能の強化・修正を行った点以外はさほど変えていないので大丈夫だと思うのですが、 要望があったりバグを発見した場合はコメント等で連絡して頂ければ可能な限り対応します。(管理人が確認した閲覧環境はこちら

2つ程予防線を張っておくと、画像などをiPhone 4等に採用しているRetinaディスプレイに対応させてほしいという要望は運営コストの問題から不可能ですし、 管理人はApple製品の実機を所有していないのでそちらの方面のバグ修正は期待できないと思って下さい。