パソコン出張サポートの専門会社、ルキテック社様のサイトをNucleusで構築しました。再構築案件です。デザインもだいぶ手を入れたのですが、基本的なロジックに従ったデザイン調整なので、あえてリニューアルとは言わないことにしてます。
ルキテック社さんは、主に大阪を中心にパソコンサポート事業を展開。リピーターさんからのクチコミ効果もあるようで、宅配便などを利用して他の府県から依頼を受けることもあるそうです。職業柄、パソコン作業の一環としてホームページの製作もある程度はオーナーさん自らできるご様子ですが、せっかくSNSを通じてお付き合いがあるからという感じで今回の依頼をいただけました。「大阪でパソコン修理といえばルキテック！」という感じで検索エンジンへのアピールもしたいとのことなので、専門的なSEOというほどでもないですが、そのへんも少し工夫しました。
ログインしない状態のヘッダまわり。
サイトを更新するためにログインすると、このように管理用のツールバーが表示されます。既存のページを書き換えたい場合は「このページを編集」をクリックすると編集画面が開きます。このコーナーに新規にページを追加したい時は「新規投稿」を開きます。新規にページを投稿するとサイドメニューも自動的に更新されます。
もともとNucleusはテンプレート変数<%edit%>で編集用のリンクを出力することができますが、インターフェイスの表示位置を固定するためにあえて<%edit%>は利用していません。<%edit%>を利用する場合はアイテムとの関連付けが前提になるので、表現を工夫しないと分かりにくくなります。今回の製作では、itemスキンだけでなくindexスキンでも同様のインターフェイスを出力するように組んでおり、担当者さんはスキンタイプの違いを意識することなくページを編集することができます。itemとindexでは編集の仕方が違うといっても、担当者さんがNucleusに詳しくなければ意味が分からないと思います。
「このページを編集」で投稿画面を開いたところ。WYSIWYG編集できるよう、NP_TinyMCEをインストールしてます。
画面が狭く感じられる時は、全画面ボタンをクリック。ワープロ感覚。
画像の貼り付けはこんな感じ。NP_Mediatocuです。見た目の分かりやすさだけでなく、画像をアップロードする際の最適化もバックグラウンドで自動的に行なうように設定してて、アップロード元の画像が大き過ぎる場合はデザインが崩れない程度に適当に縮小し、ファイル名が日本語のままでも、不具合が起きないように自動的に適当な名前に変更します。大手のレンタルブログではこのくらいは当たり前だと思いますが、NucleusやWordPressなどを利用して自前でシステムを組む場合、こういうところが不便なままで納品されることが実際は多いように思います。
セル結合を伴う表組みの編集も簡単。これ、編集画面ですよ。WordPressでもTinyMCEを採用してるので同じようなことはできますが。
さて検索エンジンについては・・・
「大阪 パソコン修理」でググってみました。トップから3番目。ガツガツSEOしたわけでもなく、構造に気を配る程度でこの結果なら上出来だと思います。以前までは100位まで探しても出てこずほとんど圏外でした。
上記は着手前のサイトの状態。この時点ですでにNucleusでした。社長さん自ら構築なさったそうです。
ちょっと目につく感じがするのが画像のアラ。
各部のマージンが不揃いなのも気になったので、揃えられるところは揃えましょうと提案。
表組みのスタイルとか
問い合わせフォームも寂しい感じ。
サイト全体に違和感を感じる原因として、青か緑かで統一されてない色合いと、自然になじむ感じのしない彩度表現がよくないので、そのへん調整しましょうと提案。デザイン的にはあまり手間をかけてませんが、だいぶ見映えが変わったのではないかと思います。
問い合わせフォームはこんな感じにしました。あまりデザインにこだわらず、薄い色の細線にするだけで十分だと思います。マージンを広めにとって、横幅はほぼ100％くらいで。それだけで、誰でも簡単にそこそこ見映えのするフォームとか表組みが作れると思います。
以下、ルキテックさんの紹介。
とても面倒見のいいパソコンサポート会社さんなので、これを機会にお仕事が増えるとよいなあと思います。いざとなれば遠隔サポートもやってるみたいです。実のところ、僕も昔はパソコンサポートのお仕事をしてました。少しパソコンが得意な程度の同業者さんは多いけど、しっかり勉強してる人は少ないなと実感してます。ウイルスに感染していることに気付かないまま、依頼されたプリンターの設置作業だけ済ませて帰っちゃうような業者さんもいます。一日あたり少しでも多くの仕事を消化しようと思うと、どうしても最低限の作業だけで済ませたいだろうし、それが普通なのかもしれませんが。
※追記
投稿画面を少し改良しました。
実際のサイトのイメージに近い背景画像を設定しました。どんな感じで掲載されるのかイメージしやすいと思います。
2011年9月3日追記
現在、このサイトはMODXで運用しています。MODXは、ルールに縛られない特例対応を得意とするCMSで、検索エンジン対策に大きな効果を発揮できます。