works:育休後コンサルタント.com

育児休業後の、社員と会社をサポートするサービスをしている、「育休後コンサルタント」山口様のウェブサイトを作成しました。

http://1995consultant.com/

Webプランナー・プロデューサーのオノリナさんからのご依頼です。
オノリナさんとはTwitterを通して交流をするようになりました。こうして、外部での活動を通してご依頼をいただけるのは本当にうれしいことです。ありがとうございますー（-人-）ﾍﾟｺ☆

トップページのデザインは、机の上に書類を置いているようなイメージを求められました。
海外のWordPressテーマのようなアーティスティックなものだと、可読性が落ち、ビジネスの印象から離れてしまうので軽めに抑えて、クリップや付箋を付けたり、鉛筆で書いたようなワンポイントイラストを添えました。

内部面の話としては、山口さんがもともとWordPressでサイトを運営していたので、WordPressベースとなりました。
3.0以降の新機能である「マルチブログ」でメインコンテンツとブログを分けています。

マルチブログは今回初めて実務で使ってみたものの、まだMovableTypeやa-blog cmsと比べるとブログ間のデータ連携などに未熟な部分が多く、今の時点では何個ものブログで構成されたポータルは難しいかな、という印象です。

最近は、技巧を凝らしたサイトを作るのではなく、シンプルでもいかに少ない手順で快適に更新できるか、慣れてきた後も末永く使っていただけるか、という地味なところに力を入れています。

このサイトでは、本文中にボタン風の誘導リンクを作ることができます。
ボタン風リンクの要望があった場合は、できるだけ簡単に作成できるよう、a要素をem要素で囲むだけで作成できるようにしています。

日本のブログ記事では「i」ボタンはまず使われないのを逆利用したTIPSですが、そういったことも工夫の一つと考えています。

HTML

<em><a href="#">○○についてのお問い合わせはこちら</a></em>

CSS

.freetxt em a {
display: -moz-inline-box;
display: inline-block;
height: 20px;
padding: 0 10px 0 25px;
background: #0095C3 url(../images/parts/detail_btn_02.png) no-repeat 0 0;
color: #FFFFFF;
font-style: normal;
text-decoration: none;
vertical-align: middle;
line-height: 20px;
}

.freetxt em a:hover {
color: #FFFFFF;
text-decoration: none;
}

また、案件の納品時には、PDF形式のマニュアルを添えるようになりました。

前半のページは新着など、最低限必要な更新方法について書いていますが、後半に進むたびに他コンテンツからのピックアップ・見出しやリストの装飾・コピペで使える表や段組のTIPSなど、細かい情報になっていきます。

サイトができて、記事を埋めたことで満足してしまうクライアントさんは少なくありません。
しばらく経って更新に慣れてきたときに読み返して、レイアウトやライティングなど、読みやすいページづくりにさらに力を入れてもらえれば、と思って、丁寧に書いています。

誰が使っても、例えば企業なら担当者が退職しても更新できること。
CMSカスタマイズを扱う以上、それを予算の許す範囲で目指したいと思っています。

Blog

HTML

CSS