何度目かのリニューアル

この自分の営業用サイト（ueroku.net）の何度目かのリニューアルを行いました。基本的なサイト構成は前回のリニューアルとと変えていないのですが、細部をひとつひとつ見直し、今後もっと積極的に更新していけるような仕組みを組み込みました。

主なリニューアルポイントです：

ウェブ制作四方山話

上町のおっさんの鳥鉄日記（旧：上町のおっさんのブログ）で書いていた、Drupal関連等やウェブ制作関連のコンテンツをこの営業用サイトに移転を図ってきたのですが、何度かトライしたものの、なかなか続かず、SEO的にもかなり拙い状態で放置されていることに気づきました。

sitemap.xmlを再構築して、インデックスを送信し直したりしたものの、やはりコンテンツの発信が一番重要で、気を引き締め直して、やっていこうと考えています。

改めて過去のコンテンツと一緒にしたら、何度も長期間の空白があります。クライアントサイトじゃなくて自分サイトなので、どうしても後回しになってしまう訳ですが、自戒の念も込めて「この間長期間更新できていません」と明記してみました。

フルSSL化

格安証明書でサイト全体をSSL化しました。

ユーザーインターフェースの見直し

前回のリニューアルではもうあまり更新しなくても済むようにトップページに必要なことを全て押し込んで簡易なUIにしてしまったのですが、積極的に更新していくことを前提にUIを作り替えました。具体的には、メニューボタン（ページ右上の3本線のボタン、これハンバーガーメニューというそうです）でリンクメニューをサイドからスライドして開閉する方法を、モバイルだけじゃなくてデスクトップでも使うことにしました。トップページだけじゃなくて、個別コンテンツや一覧ページへ誘導しやしくしています。

デザイン

トップページ以外はできる限りシンプルに、シングルカラムレイアウトで、できるだけ色数を限定すすという方法にチャレンジしてみました。ページ自体は6色に分け、濃いグレーのブロックを挟んで背景とテキストは同じ色、リンクテキストだけ白で落ち着きました。クライアントサイトでは使えない手法かもしれません。

トップページ

前回のリニューアルで組み込んだfullpage.jsを使ったフルスクリーンレイアウトはそのままに、文章やデザインの細部も見直しました。シンボルマーク的に組み込んでいる蝶のアニメーションは、アサギマダラっぽくしてみました。最初のセクションの背景は淀川で撮影した実写のアサギマダラの写真や、左右に移動して切り替える「大阪散歩」の写真は、テキストを読みやすくするために、ドットパターンで網掛けしています。

これでも文字が読みにくいという声もでてきそうですが、boldとかtext-shadowは使いたくないし、背景に馴染んでいるようにも見えるのでとりあえず、このままで行ってみます。

jqplotを使ったグラフもデータを更新、X軸の値を傾けたりスマホの画面でも読みやすくしています。jqplotはかなりクセのあって、触り甲斐があるプラグインです。

組み込んだ個々の手法の詳細については、更新ネタとして書いていくつもりです。