お知らせツイート-フィード-コピーワイヤーフレーム制作からモックアップ制作、コーディング、WordPressテーマ化、そして最終調整。自分事だとすごく時間がかかってしまいますね。仕事案件が最優先ですもの、しょうがありません。DesignWebサイトをリニューアルいたしました。制作していた矢先に、こちらのサイトを見ていただき気に入って頂いて受注に繋がったりと既にラッキーツールと化していますが、今後もコンテンツ内容を常に見直し修正を重ねていき、また至らぬコーディングも常に見直しながら、サイトと共に一緒に成長していければと考えています。簡単ではありますが、どのような流れで制作していったかをメモしておこうと思います。ワイヤーフレームワイヤーフレームといってもそんな大したものは作っておりません。最低限必要な要素の並びや配置を考えて、目に見える形に落としこんでいきました。他の案件でも同じようにやっていますが、ノートにざっくりとワイヤーを書いて情報の並びをチェックします。何度も書きなおしてみては時間を少し空けたり、寝てみたり、次の日にまた考えなおしたりしてみます。個人制作物ではよくあることなんですが、ここをざっくりやり過ぎると製作中にとんでもない変更を思いついたり、そもそものプロジェクトの根底を揺るがすような他のアイデアが後で生まれてきたりと厄介です。ここでもちゃんと考える時間を作っています。Photoshopで制作しました。Illustratorか同Fireworksで作っていましたし、特に大きな問題を感じたことはありませんでした。(個人で完結する案件がほとんどですので)しかし、今後のことも考えるとPhotoshopでWebデザインできるようになっておくに越したことはない、というご意見も頂いたので挑戦してみることにしました。やってみると、なんとなくですがサマになってくるものなんですかね。ショートカットもそこそこ使えるようになると、そんなにストレスは感じなくなります。今後はPhotoshopでのWebデザインもどんどん取り入れていこうと思います。コーディングローカルにてコーディングを開始しました。今のところ開発環境はMAMPで構築しています。ビビりながらですが黒い画面でSassやCompassの設定を行い、Sass/CompassでCSSは書いています。今回に限らずですが、レスポンシブでの対応を相談された時にはBootstrapを使うことも良くあります。Bootstrapですが、Sassで自分で使いやすいようにテンプレート化して常備しています。しておくことによって、Bootstrapのグリッドシステム部分だけを利用するとか、グリッドシステムとナビバー周りだけを利用するとか、必要に応じて使用部分を選べるのでコードが不必要に重くならないように意識はしています。HTML5とCSS3で書き上げていきます。突っ込まれそうですが、レガシーブラウザへの対応はしていません。別途言われれば対応しますが、基本的に切り捨てていく方針です。最後にJavaScript(jQuery)を追加して調整します。今回のリニューアルでは、Chart.jsとか使ってみました。WordPressテーマ化そして、コーディングが終わったらWordPressテーマ化していきます。最初からテーマ化していくことも不可能ではないのだろうし、そうやってみえる方も多いのかと思いますが、僕は分けて行います。コーディングが終わっているので殆どの場合は、ここからは実際運用するサーバー上で作業することが僕は多いです。この部分ではCodexの出番はかなり多いです。毎案件ごとにわからないことがどんどん出てくるので、調べては勉強しての繰り返しです。ほんと毎日勉強ですね。コーディングもそうですが、基本的にCoda2を利用して制作しています。最近ではSublimeTextやBracketなどのテキストエディタも多く揃っていますが、Coda2に慣れてしまっているからなのか、なかなか手を出してみても続きません。Livereloadには憧れます。Codeが複数タブに対応したら乗り換えも考えるかもしれません。ここでカスタム投稿の設定をしたり裏側をごにょごにょしたりします。PHPとWordPressテンプレートタグなどに埋もれる作業となります。実装が完了したら実際に運用テストを行います。記事を投稿してみたり、検索をかけてみたり、管理画面のUIをカスタマイズするのもここですることが多いですね。実際に使っていて変更したい点を洗い出したりします。最後にGoogleさんにちゃんとインデックスしてもらえるようにおまじないを施して終了となります。完成というよりも運用開始と考えるほうがベターでしょうね。実際にWebサイト(ホームページ)は運用開始がスタートラインですからね。制作は準備段階ですからね。SEOやLPO的に色々と試行錯誤していく運営が始まるということになります。個人的に最近思うこと僕はお客さんに恵まれている方だと思います。作って終わり、という案件は少なく継続的に関わらせていただける形が多々あります。いう場合、Web制作だけで終わるっていう考え方や仕事の仕方ではなかなか先が見えなくなってしまいます。コンテンツを作り上げていくお手伝いもさせていただきながら、SEO的なアドバイスもさせていただきながら、一緒に作り上げていくという形で関わらせていただけるお話があるのは本当に嬉しい事です。いう現状にかまけないで、少しずつ自分で勉強しながら、場合によっては勉強させてもらいながら、良きデザインパートナーになれるよう精進していかなくてはならないな、と思っている最近です。Designですが、今後ともよろしくお願いいたします。お客様の声オレインデザインにご依頼いただいたお客様(個人・法人含む)からの声を紹介しています。岐阜を中心にWeb制作全般のお仕事をしているフリーランスです。趣味はサッカー・F1観戦。英国プレミアリーグ、マンチェスターユナイテッドを長年愛しています。英国滞在歴2年、日常英会話くらいは大丈夫です。20ヶ国以上列車で単独周遊してきました。WordPress大好きです。Meetup共同オーガナイザー・CoderDojo岐阜チャンピオンなどの活動もしています。ロゴを作る過程この投稿へのトラックバックトラックバックはありません。Meetupの活動に協力しています。公式サイトはこちら岐阜市を拠点に活動しているフリーランスWeb制作者です。WordPressを得意としています。Meetupについて岐阜市を中心に毎月1回WordPressを使っている方向けのコミュニティを開催しています。初心者の方(これから勉強したい方も!)もどんどん参加していただいています。