[ブログ]祝！リニューアル！！ブログのリデザインをwebクリエイターボックスに依頼してみたよ！

Tweet
トップへ

Hello World with a Big Smile (^^)　@conchikuwaです。

やっとこさブログのリニューアルをやりました！これで4回目のリニューアルです。

しかも今回はオリジナルテーマ！！世界に1つだけのブログだよ！

前回使用していたテーマもものすごく気に入っていたのですが、有料テーマといえ、テンプレートなので、いつかはオリジナルテーマをと、その夢がついに叶いました！

そうはいってWebデザイナーでもないので、デザイン力は皆無に等しく、プロにお願いすることに。

で、白羽の矢を立てさせていただいたのが、今をときめくWebクリエイターボックスの中の人、@chibimana（マナ）さんです。以前からブログを読んでいて、もしリニューアルするならマナさんにお願いしようと心に決めておりました。今回お忙しい中、お受けしていただけて感謝です！

なのでリニューアルにあたりお願いしたこと、流れについて纏めてみようと思います！

今までのデザインは↓

Unspokenという有料テーマを使っておりました。

Unspoken Premium WordPress Theme
Advanced WordPress Premium theme developed proceeding from your wishes. Unspoken is our first clean …
気に入ってたんですが。。。

有料テーマだけあって、いろいろカスタマズができて気に入っていたんですが、やっぱりテンプレートなので、同じテーマのブログもあって、オリジナルテーマでリニューアルすることにしました。

依頼する。

マナさんはブロガーだったら一度はお世話になっているWebクリエイターボックスの中の人。僕もブログを弄っていて分からないことがあるといつもチェックさせていただいております！

そんなマナさんにお願いしようと思ったきっかけは、↓の記事達。

「ホームページを作る人のネタ帳」さんのリデザインをしました | Webクリエイターボックス
Webデザインには大きく分けて2種類あります。新規作成と、既存のサイトのリデザインです。今回「ホームページを作る人のネタ帳」さんのリデザインをお手伝いさせて頂きました！リデザインにあたり、改善点やリデ …
いつもありがとうございます！

ブログのリデザインをwebクリエイターボックスに依頼してみた*ホームページを作る人のネタ帳
というわけでブログデザインの5回目の大改築を行いました。リデザインの受注側のお話はクリエイターボックスさんの記事を参考に、今回は発注側としてどのような事を行ったかを記載して行きます。 …
いつもありがとうございます！

サイトのリニューアルをしました！ | N1kuMeet5
こんにちは、Webクリエイターボックスというブログを書いている、WebデザイナーのManaです。今回こちらN1ku Meet5の中の人、@N1kuch1さんよりサイトリニューアルのご依頼を頂きました！ …
いつもありがとうございます！

このブログもマナさんにリニューアルして欲しいとダメ元メールをしたのですが、お忙しいし、断られるかなと思っていたら、今忙しいけど、落ち着いたら(・∀・)ｲｲ!!よとのお返事が。メール見た時、PCの前で小躍りしちゃいましたよ。マジで。。。

で、マナさんもお忙しく、僕も有料テーマを買っちゃって、もう少しそのテーマを使いたかったりしたので、お互いの都合がいい日を調整して打ち合わせをしました。

打ち合わせ

当時マナさんはロンドン在住だったので、打ち合わせはスカイプを使用して時差を考慮したお互いに都合がいい時間帯で行いました。音声のみかと思ったら、ビデオ通話だったのでビックリしましたよ。

マナさんカワユカッたですよ(^^♪

今回の依頼内容は、大きく分けて３つ。

ブログタイトルの変更。

ブログロゴの制作

WordPressテーマのデザイン

です。

この打ち合わせで僕から依頼事項を伝えて、それに対してお見積りをしていただきました。そのお見積もりで問題なければ契約成立となり、もし予算的に厳しければ、お願い事項を見直して、妥協点を見つける事になります。

本来はスカイプでの打ち合わせ最初だけで、後はメールでのやり取りになるんですが、マナさんとお話できる事で舞い上がってしまい、伝えるべき事を伝えきれなかった事もあって、スカイプでの打ち合わせは2回行いました。

（マナさんともう1度話したかったからってのは内緒な。）

契約が完了したら、以降はBaseampというプロジェクト管理ツールを使って進めていきます。通常のメールでのやり取りですとメールが届いてなかったり、謝って削除したりする可能性がありますが、Baseampですと一元管理ができて、スムーズにプロジェクトを進めていくことができます！

Basecampについて詳しくは↓

プロジェクト管理ツール「Basecamp」の使い方 | Webクリエイターボックス
「海外Webサイト・海外Web屋の特徴」でも少し紹介したプロジェクト管理サービス、Basecamp。「日本語版があれば使ってみようかな」という人がいたのですが、実は日本語に対応しているのです！アカウン …
便利ですよ(^^♪

ではここから依頼事項に関する流れのご紹介。

ブログタイトルの変更

ご存知の方はあんまりいないかもですが、当ブログの正式タイトルは「こんちくわのぶろぐ（仮）」っていいます。突貫工事でブログを立ち上げたので、とりあえず後で変えようと思って（仮）ってつけておりました。僕の場合、とりあえずはそのままになりがちで、案の定（仮）をつけたまま1年以上放置していたんですが、リニューアルに合わせてブログタイトルも変更することにしました。

マナさんにもブログタイトル案を考えてもらったんですが、なかなかいい案が出ず、またガッツリ変えるのもどうかなと思い、最終的に、

「コンチクワブログ」

に決定しました。ひらがなからカタカナにして「の」を取っただけですが。。。(^_^;)　いろいろ考えたんだお。

ロゴの制作

もしかしたらここが一番時間がかかったかも。依頼する側である程度、イメージがあればスムーズにいきますが、僕の場合、何のイメージもなくお任せでって感じだったので、ちょっと申し訳なかったです。

最初にいただいた案がコチラ。

シンプルなデザインが好きだと伝えていたので、至極シンプルなロゴ。タイトルがカタカナなのでロゴはカタカナを採用。また2個めロゴの「グ」の点々がRSSチックで情報発信してますよって感じがでているので、これも採用。ただちょょっとシンプルすぎるかなということで。下記を追加でお願い。

Twitterやfacebook、名刺で使えるようにアイコンが欲しい。
フォントは昔風のいわゆるナショナルフォントちっくなのがいい。
差し色にオレンジ色が欲しい。

で、改めていただいたのがこちら。

だんだん良い感じになってきました。

フォントはこのフォントを採用。

「Hello World with a Big Smaile」という言葉は、僕がブログを書く時に最初に書いている「いつも笑顔でこんちくわ」を英訳していただいたもの。フレーズはすごく気に入ったのですが、ロゴに使うとちょっとうるさい感じがしたので、ロゴではなくブログテーマで使ってもらうことに。

4番は面白くていいんですが、ちょっとコミカル過ぎて不採用。１，２のように吹き出し風のアイコンと5の色合いが気に入ったので、ちょっと足して2で割ったようなイメージがいいという事と「こんちくわ」なのでスマイルマークがちょっと欲しいなと伝えて、出来上がったのがこちら。

ほぼ完璧。

スマイルマークを入れてもらったんですが、ちょっとアイコンには合わないかなということで、ロゴではなくブログテーマで使ってもらうことに。アイコンは斜めの方がちょっと違和感があって面白いかなということで１，２のデザインを採用。あとフォントの関係で「ク」と「ワ」が区別しにくかったので、ちょこっと修正してもらって出来上がっのがこちら。

完璧っす。

何もないイメージからロゴを作り出すプロって凄いなと改めて実感。ロゴが決定したので、遂にwordpressのテーマの作成に入っていきます。

WordPressテーマのデザイン

WordPressテーマのデザインに関しては以下の内容をお願いしました。

今のデザインからがっつり変えたい。

色は白ベースにオレンジと黒を差し色に。

メインページは、BOX状に。

記事ページは読みやすく。

h2、h3、h4に背景、ちょっとだけ凝ったもの

ヘッダー、フッターは画面の端から端まで

ちょっと立体感が欲しい

jquery等で少し動きが欲しい。

アイコンでのリンク（次へ、Twitter、RSS等）はマウスオーバでアクションが欲しい。

固定メニューが欲しい（ソーシャルBOX・現在あるような）

レスポンシブデザインで

ちょっとした仕掛け。

IE6は無視で。

メインページでのコンテンツのBOX化は以前からやりたかった事なので、お願いしました。あとレスポンシブデザインについてはスマホからのアクセスも結構あるので、できるならお願いしたかった事。一から作るといろいろ大変なので、今回はwordpressの標準テーマ「twenty twelve」をカスタマイズする事で実装していただきました。

まずいただいたのがこちらのメインページのデザイン。

全体のデザインは何も文句をつけるとこがなく、このデザインを採用。特にアイコンがどーんで「Hello World with a Big Smaile」の入ったヘッダー部分が素敵。

スマイルマークが欲しかったのとメインページはサイドバー無しでBOXだけで埋めたいという事を伝えて最終的に出来上がったデザインがこちら。

ぱあふぇくと！

あと記事エントリーの間にTwitterやfacebook、アドセンス広告を入れるようにしていただきました。メインページが決定したので、次に記事ページのデザインに入っていきます。表示するコンテンツについては現在と同じで、重複している情報については精査してもらい、できあがったデザインがこちら。

全体的なデザインは希望通り。ただ記事部分が少しシンプルすぎる感じがしたので、関連記事にアイキャッチを入れてもらったり、各種SNSサービスへのリンクを付けてもらったりして、最終的に出来上がったデザインがこちら。

素敵ング！！

僕には思いつかないデザインのブログに仕上がって参りました。さぁ後は動作確認テストをするだけです。

動作確認テスト

デザインが出来上がっても、PHPファイルに変換して、実装してうまく動作しないと意味がありませので動作確認テストを行います。ただいきなり当ブログのサーバーでテストするのはデンジャラスなので、テスト用のサーバーを用意します。

当ブログで使用しているSIXCOREのサーバーはマルチドメイン＆サブドメイン対応なので、新しくサブドメインを取得して、そこにwordpressをインストールし、ログイン情報やデータベース情報をマナさんにお伝えしました。

余談ですが、サブドメインの場合、ドメイン取得に特にお金もかかりませんし、テストするときにはオススメです。あとSIXCOREは標準でwordpressの1クリックインストール機能がついていたので、テスト環境の構築も楽チンでした。

また進捗もサブドメインにアクセスすれば、どんな状況か分かって、少しずつ出来上がっていくNEWデザインを見るとワクワクしましたです。

とりあえずテスト環境での実装が完了するまでしばらく待ち、マナさんから完了の連絡があった後、検証を行います。

今回レスボンシブテーマでお願いしたということもあって、Mac、PCでFirefox、IE、Chrome、Safariのクロスブラウザと、iPhone、iPadのiOS、Nexus7のAndroidで検証実施しました。

ここでレイアウトが崩れている部分やデザイン的に修正して欲しい部分をマナさんにお伝えして、再度修正、検証を行い、問題なければ完了です！！

Mac、iPhone、iPad、Nexus7、それぞれのデザインはこんな感じ。

iPhone

iPad

Nexus7

それぞれのデバイスに最適化されて表示されています。（Nexus7でヘッダーが2段に表示されているのは、ちょっと直そうかな。）レスポンシブデザインなので、PCでもブラウザの横幅を変えていけば、ニョロニョロとコンテンツが可変していきます。

ここまで来たら、あとは当ブログへの実装あるのみ。

実装

当初、実装はwordpressの「Theme Test Drive」というプラグインを利用して行う予定でした。（僕がマナさんにお願いしたのですが。）

「Theme Test Drive」は管理画面にログインしている人のみテーマを変更できるというプラグインでテーマの変更、修正にはもってこいのプラグインなのですが、今回はテーマの完全変更だったので、新テーマも崩れてしまい、使えませんでした。プラグインやウェジットの関係で既存テーマが多少崩れるのは覚悟していたんですが、新テーマも崩れてしまうとは。。。

なので結局昨日2013年3月3日午前0時から「underConstruction」を使用してサイトに「メンテナンス中」と表示して切り替えていただきました。

（当エントリーは前もって予約投稿しております。）

お気に入りポイント

全部お気に入りではあるんですが、中でも特に気に入っている部分は、

遂に出来たオリジナルロゴアイコン

以前から欲しかったオリジナルロゴアイコン。欲しくてもデザインできないので、今回できてホント嬉しいす。TwitterやFacebookのカバー画像や名刺にも利用しようと思います。あとステッカーも作ろうかしら(^^♪

コンテンツをBOX化したメインページ

メインページは記事ページをちょっとデザインを買えたくて、コンテンツをBox状にしているデザインが以前から好きだったので、これも実装できて嬉しい。デザイン的にもシンプルでスキッリしていて良い感じす。

レスポンシブデザインでデバイスを選ばない

PCだけでなくスマホ、タブレットからのアクセスもどんどん増えてきております。iPhoneのアプリやwordpressについての記事をメインに書いているので、iPhoneからアクセスする方も多いんだと思います。そうなるとやっぱりデバイスに最適化したデザインが重要になってきます。iPhoneの小さい画面でPCと同じデザインだと文字が小さくて見る気がなくなりますしね。

今まではWPtouchを使用したり、「WPtap Mobile Detector」を使用してモバイルサイトに別テーマを適用したりしておりましたが、テーマが分かれているとメンテナンスも大変でした。

レスポンシブデザインになったことで、カスタマイズも一元化できて楽チンになるのではと思っております。まぁレスボンシブデザイン独特の大変さもあると思いますが。