--- title: "リニューアルしました" canonical_url: "https://olein-design.com/blog/web-site-renewal" language: "ja" date_published: "2014-02-27T18:14:50+09:00" date_modified: "2014-02-27T18:14:50+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "お知らせ" post_tag: - "Coda 2" - "Photoshop" - "Workflow" --- # リニューアルしました ワイヤーフレーム制作からモックアップ制作、コーディング、WordPressテーマ化、そして最終調整。自分事だとすごく時間がかかってしまいますね。仕事案件が最優先ですもの、しょうがありません。 冒頭から能書きで始まってしまいましたが、**Olein Design**Webサイトをリニューアルいたしました。制作していた矢先に、こちらのサイトを見ていただき気に入って頂いて受注に繋がったりと既にラッキーツールと化していますが、今後もコンテンツ内容を常に見直し修正を重ねていき、また至らぬコーディングも常に見直しながら、サイトと共に一緒に成長していければと考えています。 簡単ではありますが、どのような流れで制作していったかをメモしておこうと思います。 ![OleinDesignWebDesignForAllDevice_iPhone](https://olein-design.com/wp-content/uploads/2014/02/OleinDesignWebDesignForAllDevice_iPhone-1024x595.jpg) ## ワイヤーフレーム ワイヤーフレームといってもそんな大したものは作っておりません。最低限必要な要素の並びや配置を考えて、目に見える形に落としこんでいきました。 他の案件でも同じようにやっていますが、ノートにざっくりとワイヤーを書いて情報の並びをチェックします。何度も書きなおしてみては時間を少し空けたり、寝てみたり、次の日にまた考えなおしたりしてみます。個人制作物ではよくあることなんですが、ここをざっくりやり過ぎると製作中にとんでもない変更を思いついたり、そもそものプロジェクトの根底を揺るがすような他のアイデアが後で生まれてきたりと厄介です。ですので、少しだけですがここでもちゃんと考える時間を作っています。 ## モックアップ モックアップは今回は練習のためにAdobe Photoshopで制作しました。というのも、Webデザインを作る時は今まではAdobe Illustratorか同Fireworksで作っていましたし、特に大きな問題を感じたことはありませんでした。（個人で完結する案件がほとんどですので）しかし、今後のことも考えるとPhotoshopでWebデザインできるようになっておくに越したことはない、というご意見も頂いたので挑戦してみることにしました。 ![photoshop_screenshot](https://olein-design.com/wp-content/uploads/2014/02/photoshop_screenshot-1024x566.png) やってみると、なんとなくですがサマになってくるものなんですかね。ショートカットもそこそこ使えるようになると、そんなにストレスは感じなくなります。今後はPhotoshopでのWebデザインもどんどん取り入れていこうと思います。 ## コーディング ローカルにてコーディングを開始しました。今のところ開発環境はMAMPで構築しています。そして、ビビりながらですが黒い画面でSassやCompassの設定を行い、Sass/CompassでCSSは書いています。なので、作業の最初には黒い画面で「compass w」です。 今回に限らずですが、レスポンシブでの対応を相談された時にはBootstrapを使うことも良くあります。ちょくちょく話題にあがる[Twitter Bootstrap](http://getbootstrap.com/)ですが、Sassで自分で使いやすいようにテンプレート化して常備しています。そうしておくことによって、Bootstrapのグリッドシステム部分だけを利用するとか、グリッドシステムとナビバー周りだけを利用するとか、必要に応じて使用部分を選べるのでコードが不必要に重くならないように意識はしています。 そして、HTML5とCSS3で書き上げていきます。色々と突っ込まれそうですが、レガシーブラウザへの対応はしていません。別途言われれば対応しますが、基本的に切り捨てていく方針です。 最後にJavaScript（jQuery）を追加して調整します。今回のリニューアルでは、[Chart.js](http://www.chartjs.org/)とか使ってみました。 ## WordPressテーマ化 そして、コーディングが終わったらWordPressテーマ化していきます。最初からテーマ化していくことも不可能ではないのだろうし、そうやってみえる方も多いのかと思いますが、僕は分けて行います。そして、コーディングが終わっているので殆どの場合は、ここからは実際運用するサーバー上で作業することが僕は多いです。この部分ではCodexの出番はかなり多いです。毎案件ごとにわからないことがどんどん出てくるので、調べては勉強しての繰り返しです。ほんと毎日勉強ですね。 コーディングもそうですが、基本的に[Coda2](https://panic.com/jp/coda/)を利用して制作しています。最近ではSublimeTextやBracketなどのテキストエディタも多く揃っていますが、Coda2に慣れてしまっているからなのか、なかなか手を出してみても続きません。でも、Livereloadには憧れます。なので、Edge Codeが複数タブに対応したら乗り換えも考えるかもしれません。 ![coda2_screenshot](https://olein-design.com/wp-content/uploads/2014/02/coda2_screenshot-1024x566.png) ここでカスタム投稿の設定をしたり裏側をごにょごにょしたりします。PHPとWordPressテンプレートタグなどに埋もれる作業となります。 ## ほぼ完成 実装が完了したら実際に運用テストを行います。記事を投稿してみたり、検索をかけてみたり、管理画面のUIをカスタマイズするのもここですることが多いですね。実際に使っていて変更したい点を洗い出したりします。最後にGoogleさんにちゃんとインデックスしてもらえるようにおまじないを施して終了となります。 ですが、完成というよりも**運用開始**と考えるほうがベターでしょうね。実際にWebサイト（ホームページ）は運用開始がスタートラインですからね。制作は準備段階ですからね。 SEOやLPO的に色々と試行錯誤していく運営が始まるということになります。 ## 個人的に最近思うこと 僕はお客さんに恵まれている方だと思います。作って終わり、という案件は少なく継続的に関わらせていただける形が多々あります。 そういう場合、Web制作だけで終わるっていう考え方や仕事の仕方ではなかなか先が見えなくなってしまいます。コンテンツを作り上げていくお手伝いもさせていただきながら、SEO的なアドバイスもさせていただきながら、**一緒に作り上げていく**という形で関わらせていただけるお話があるのは本当に嬉しい事です。 そういう現状にかまけないで、少しずつ自分で勉強しながら、場合によっては勉強させてもらいながら、良きデザインパートナーになれるよう精進していかなくてはならないな、と思っている最近です。 デザインリニューアルしたOlein Designですが、今後ともよろしくお願いいたします。