ポイント3つ!28デザインワークスがWebサイトリニューアル

2015.01.08 Thursday

0
    28デザインワークスの Web サイト

    先週末から取りかかったのですが、28デザインワークスの Web サイトをリニューアルしました。
    昨年は殆んど更新できなかったので、ちょっと大がかりな作業をするタイミングを探っていたのですが、結局年始になってしまいました。

    今回のリニューアルは
     
    1. 文字の変更
    2. メニューの変更
    3. ヘッダーの変更

    が目的です。

    1)文字の変更
    タイトルにしろ文章にしろ、これはスマホやタブレットを意識してのことです。
    完全に対応させようと思うと、レイアウトも触らないと無理なので、文字の見やすさだけ意識します。

    Google のウェブマスターツールにある『モバイルユーザビリティ』でも、殆んどのページが
     
    • ビューポートが設定されていません
    • フォントサイズが小です
    • タップ要素同士が近すぎます
    • コンテンツのサイズがビューポートに対応してません

    と指摘されましたし^^;
    要は「レスポンシブに対応しろ」ということですよね。

    前回(2013年 9月)にリニューアルした際も、文字サイズや行間など文字に関して調整したのですが、最近はさらに Web サイトを表示させるデバイス(端末)が多様化しましたので、使い勝手に対応することにしました。

    具体的にはサイズを大きくしたのと、見栄えも意識してフォントも指定しています。
    文字が小さいと、スマホなど小さい端末で読みにくいのと、タップしにくいですよね。
    それを避けました。

    フォント指定は、偶然、どんな OS・ブラウザでも美しく日本語を表示させることを考えた記事を見つけましたので参考にしました。

    → CSS でのフォント指定について考える(2014年)

    今まではカンタン&シンプルに、どんな環境でも軽く表示されるようにしたかったので、フォントは指定せず、ブラウザー標準のフォントで表示するようにしていました。

    またメニューなど、クリック(タップ)できるところが並ぶ箇所は、間隔を広げてタップしやすさを意識しました。

    2)メニューの変更
    メニューはページ構成を見直して、適切な名前とか考え直しました。
    でも、殆んど変わらず 1ページだけ減らしました。

    また、以前は画像でメニューボタンを作ってましたが、今回はテキストにしました。
    1)の『文字の変更』に準じて考えてます。

    3)ヘッダーの変更
    「ヘッダー画像が小さい」「見劣るなぁ」と感じていたので『今風』『インパクト』を意識して変更しました。

    最近、ヘッダー画像が大きかったり、横方向に広い Web サイトが増えてますよね。

    1ページで完結する Web サイトやパララックスを使った Web サイトが増えたので、そう感じるのかもしれませんが、クールな大きい画像が目に飛び込んでくるのは、印象に残りやすかったり、インパクトを与えるのにイイかなと思ってました。

    海外でも『ヒーローヘッダーの Web サイト』といって流行ってきてるようですし。

    『HEADER  LOVE』なんていう、ヒーローヘッダーの Web サイトを集めた Web サイトもありますよ。

    → HEADER  LOVE

    ヒーローヘッダーなんて言ってますが、実は殆んどが背景画像ですよ。ヘッダー画像じゃないですコレ^^

    大きい背景画像の前にタイトルやメニューボタンを配置してる構造なんです。
    また、殆んどがスマホやタブレットに対応したレスポンシブな Web サイトです。

    ということで、28デザインワークスも真似してみました。

    今回、ヘッダーとメニューが主なリニューアルで、コンテンツ部分は殆んど触ってませんので、極端にブラウザの窓を小さくすると、表示の見栄えが悪くなるかもしれませんが。

    完全にレスポンシブな Web サイトには追々していきます。
    レイアウトを作り直す時間が必要なので^^;

    意外と「問題かな?」と思ったのは、背景画像のサイズでして、3K や 4K サイズの画像はいくら圧縮しても(劣化させても)、イマイチ小さいサイズにならなかったことです。

    200KB 以下のサイズにして、Webサイトの表示スピードが遅くならないようにしたかったのですが、大きいものですと 300KB くらいあります。
    遅い回線で Web サイトを閲覧してる場合は、イライラするかもしれませんよね(汗

    今回のリニューアルは 3点だったせいか予定より早く完了しました(4〜5日くらい)。

    でも、本来 Web サイトはコマメに見栄えや内容、SEO 的にも見直して修正するのがオススメですよ。
    流行りがあったり、新しい技術がドンドン出てきますからね。


    → 28デザインワークスに戻る
    コメント
    コメントする
    トラックバック
    この記事のトラックバックURL