@conchikuwaです。やっとこさブログのリニューアルをやりました!これで4回目のリニューアルです。今回はオリジナルテーマ!!世界に1つだけのブログだよ!前回使用していたテーマもものすごく気に入っていたのですが、有料テーマといえ、テンプレートなので、いつかはオリジナルテーマをと、その夢がついに叶いました!そうはいってWebデザイナーでもないので、デザイン力は皆無に等しく、プロにお願いすることに。白羽の矢を立てさせていただいたのが、今をときめくWebクリエイターボックスの中の人、@chibimana(マナ)さんです。以前からブログを読んでいて、もしリニューアルするならマナさんにお願いしようと心に決めておりました。今回お忙しい中、お受けしていただけて感謝です!なのでリニューアルにあたりお願いしたこと、流れについて纏めてみようと思います!今までのデザインは↓Unspokenという有料テーマを使っておりました。...気に入ってたんですが。有料テーマだけあって、いろいろカスタマズができて気に入っていたんですが、やっぱりテンプレートなので、同じテーマのブログもあって、オリジナルテーマでリニューアルすることにしました。マナさんはブロガーだったら一度はお世話になっているWebクリエイターボックスの中の人。僕もブログを弄っていて分からないことがあるといつもチェックさせていただいております!そんなマナさんにお願いしようと思ったきっかけは、↓の記事達。WebクリエイターボックスWebデザインには大きく分けて2種類あります。新規作成と、既存のサイトのリデザインです。...いつもありがとうございます!ブログのリデザインをwebクリエイターボックスに依頼してみた*ホームページを作る人のネタ帳というわけでブログデザインの5回目の大改築を行いました。リデザインの受注側のお話はクリエイターボックスさんの記事を参考に、今回は発注側としてどのような事を行ったかを記載して行きます。N1kuMeet5こんにちは、Webクリエイターボックスというブログを書いている、WebデザイナーのManaです。...いつもありがとうございます!このブログもマナさんにリニューアルして欲しいとダメ元メールをしたのですが、お忙しいし、断られるかなと思っていたら、今忙しいけど、落ち着いたら(・∀・)イイ!!よとのお返事が。メール見た時、PCの前で小躍りしちゃいましたよ。マナさんもお忙しく、僕も有料テーマを買っちゃって、もう少しそのテーマを使いたかったりしたので、お互いの都合がいい日を調整して打ち合わせをしました。打ち合わせ当時マナさんはロンドン在住だったので、打ち合わせはスカイプを使用して時差を考慮したお互いに都合がいい時間帯で行いました。音声のみかと思ったら、ビデオ通話だったのでビックリしましたよ。今回の依頼内容は、大きく分けて3つ。ブログタイトルの変更。ブログロゴの制作WordPressテーマのデザインです。この打ち合わせで僕から依頼事項を伝えて、それに対してお見積りをしていただきました。そのお見積もりで問題なければ契約成立となり、もし予算的に厳しければ、お願い事項を見直して、妥協点を見つける事になります。本来はスカイプでの打ち合わせ最初だけで、後はメールでのやり取りになるんですが、マナさんとお話できる事で舞い上がってしまい、伝えるべき事を伝えきれなかった事もあって、スカイプでの打ち合わせは2回行いました。(マナさんともう1度話したかったからってのは内緒な。)契約が完了したら、以降はBaseampというプロジェクト管理ツールを使って進めていきます。Webクリエイターボックス「海外Webサイト・海外Web屋の特徴」でも少し紹介したプロジェクト管理サービス、Basecamp。...便利ですよ(^^♪ではここから依頼事項に関する流れのご紹介。ブログタイトルの変更ご存知の方はあんまりいないかもですが、当ブログの正式タイトルは「こんちくわのぶろぐ(仮)」っていいます。突貫工事でブログを立ち上げたので、とりあえず後で変えようと思って(仮)ってつけておりました。僕の場合、とりあえずはそのままになりがちで、案の定(仮)をつけたまま1年以上放置していたんですが、リニューアルに合わせてブログタイトルも変更することにしました。「コンチクワブログ」に決定しました。ひらがなからカタカナにして「の」を取っただけですが。ロゴの制作もしかしたらここが一番時間がかかったかも。依頼する側である程度、イメージがあればスムーズにいきますが、僕の場合、何のイメージもなくお任せでって感じだったので、ちょっと申し訳なかったです。最初にいただいた案がコチラ。シンプルなデザインが好きだと伝えていたので、至極シンプルなロゴ。タイトルがカタカナなのでロゴはカタカナを採用。2個めロゴの「グ」の点々がRSSチックで情報発信してますよって感じがでているので、これも採用。シンプルすぎるかなということで。Twitterやfacebook、名刺で使えるようにアイコンが欲しい。フォントは昔風のいわゆるナショナルフォントちっくなのがいい。差し色にオレンジ色が欲しい。いただいたのがこちら。良い感じになってきました。フォントはこのフォントを採用。Smaile」という言葉は、僕がブログを書く時に最初に書いている「いつも笑顔でこんちくわ」を英訳していただいたもの。フレーズはすごく気に入ったのですが、ロゴに使うとちょっとうるさい感じがしたので、ロゴではなくブログテーマで使ってもらうことに。4番は面白くていいんですが、ちょっとコミカル過ぎて不採用。1,2のように吹き出し風のアイコンと5の色合いが気に入ったので、ちょっと足して2で割ったようなイメージがいいという事と「こんちくわ」なのでスマイルマークがちょっと欲しいなと伝えて、出来上がったのがこちら。スマイルマークを入れてもらったんですが、ちょっとアイコンには合わないかなということで、ロゴではなくブログテーマで使ってもらうことに。アイコンは斜めの方がちょっと違和感があって面白いかなということで1,2のデザインを採用。あとフォントの関係で「ク」と「ワ」が区別しにくかったので、ちょこっと修正してもらって出来上がっのがこちら。何もないイメージからロゴを作り出すプロって凄いなと改めて実感。ロゴが決定したので、遂にwordpressのテーマの作成に入っていきます。WordPressテーマのデザインWordPressテーマのデザインに関しては以下の内容をお願いしました。今のデザインからがっつり変えたい。色は白ベースにオレンジと黒を差し色に。メインページは、BOX状に。記事ページは読みやすく。h2、h3、h4に背景、ちょっとだけ凝ったものヘッダー、フッターは画面の端から端までちょっと立体感が欲しいjquery等で少し動きが欲しい。アイコンでのリンク(次へ、Twitter、RSS等)はマウスオーバでアクションが欲しい。固定メニューが欲しい(ソーシャルBOX・現在あるような)レスポンシブデザインでちょっとした仕掛け。メインページでのコンテンツのBOX化は以前からやりたかった事なので、お願いしました。あとレスポンシブデザインについてはスマホからのアクセスも結構あるので、できるならお願いしたかった事。twelve」をカスタマイズする事で実装していただきました。いただいたのがこちらのメインページのデザイン。全体のデザインは何も文句をつけるとこがなく、このデザインを採用。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、それぞれのデザインはこんな感じ。iPhoneiPadNexus7それぞれのデバイスに最適化されて表示されています。(Nexus7でヘッダーが2段に表示されているのは、ちょっと直そうかな。)レスポンシブデザインなので、PCでもブラウザの横幅を変えていけば、ニョロニョロとコンテンツが可変していきます。Drive」というプラグインを利用して行う予定でした。(僕がマナさんにお願いしたのですが。Drive」は管理画面にログインしている人のみテーマを変更できるというプラグインでテーマの変更、修正にはもってこいのプラグインなのですが、今回はテーマの完全変更だったので、新テーマも崩れてしまい、使えませんでした。プラグインやウェジットの関係で既存テーマが多少崩れるのは覚悟していたんですが、新テーマも崩れてしまうとは。結局昨日2013年3月3日午前0時から「underConstruction」を使用してサイトに「メンテナンス中」と表示して切り替えていただきました。(当エントリーは前もって予約投稿しております。出来たオリジナルロゴアイコン以前から欲しかったオリジナルロゴアイコン。欲しくてもデザインできないので、今回できてホント嬉しいす。TwitterやFacebookのカバー画像や名刺にも利用しようと思います。あとステッカーも作ろうかしら(^^♪コンテンツをBOX化したメインページメインページは記事ページをちょっとデザインを買えたくて、コンテンツをBox状にしているデザインが以前から好きだったので、これも実装できて嬉しい。デザイン的にもシンプルでスキッリしていて良い感じす。レスポンシブデザインでデバイスを選ばないPCだけでなくスマホ、タブレットからのアクセスもどんどん増えてきております。iPhoneのアプリやwordpressについての記事をメインに書いているので、iPhoneからアクセスする方も多いんだと思います。なるとやっぱりデバイスに最適化したデザインが重要になってきます。iPhoneの小さい画面でPCと同じデザインだと文字が小さくて見る気がなくなりますしね。Detector」を使用してモバイルサイトに別テーマを適用したりしておりましたが、テーマが分かれているとメンテナンスも大変でした。レスポンシブデザインになったことで、カスタマイズも一元化できて楽チンになるのではと思っております。レスボンシブデザイン独特の大変さもあると思いますが。Smaile」という言葉も、すっごいお気に入り。世界に向けて笑って挨拶って素敵じゃあ~りませんか(^^♪オリジナルボタンアイコンロゴアイコンを使ったオリジナルのソーシャルボタン。いったちょっとしたところにもオリジナル感満載のデザインはチョ~良い感じす!おまけマナさんにお願いした内容でちょっとした仕掛けというものがあります。これは気づいた人だけが見れる、俗に言う隠しコンテンツみたいなもので、もしご興味があればソースを覗いて見て下さい。おおって思うと思います。いった遊び心も今回のリニューアルに取り入れたかった要素の一つです。あとがきいかがでしょうか。今までのデザインからがっつり変えたオリジナルデザインになって、多分二度とリニューアルすることは無いかも。今回が最後のリニューアルになると思います。それくらい気に入っております。イジって、カスタマイズも楽しんでいこうかな。何度も言うけどやっぱりプロは凄いすな。僕の稚拙な説明からここまで具体的にデザインするんだもの。