ポートフォリオサイトを公開しました～制作フローと人体実験
どうもくらけんです。
ひらがなでもカタカナでもどっちでも大丈夫です。
7/27で37歳になりました。
だからというわけじゃないんですが、
虫の息だった僕のWebサイトをフルリニューアルしました。
https://kuragebrain.com/wp/
細かいところは調整中なので、
表示おかしいところまだあると思います。
以下、メモがてら簡単に制作秘話というか、
手順を紹介していきます。
あ、ちなみになんですが、
Amazonって欲しい物リストなるものが公開できて、
匿名同士で個人情報公開せずにプレゼントし合えるらしいじゃないですか。
いや別にそういうことじゃないんですよ。
今日が誕生日だからってそういうことじゃないんです。
新しいシステムはとりあえず人体実験して、うまくいったら
周りの友人たちに教えてあげたいという
聖人君子的な想いでいっぱいです。
お待ちしております。
さて、はんなりと主題に戻ります。
制作フローのご紹介です。
１．
全体の構成を考える。
ポートフォリオがメインなのでTOPにプロジェクトごとに並べることに。
２．
デザインイメージは明確にあったので、
デザインカンプ画像（仕上がりイメージ）は作ってない。
ただ画像加工、書き出しは必要なのでPhotoshopでざっくりと作る。
３．
コーディング。
HTML、CSSをゴリゴリ書いて、見た目の部分を固める。
古いブラウザは無視してCSS3のFlexboxとかモダンな機能も取り入れることに。
レスポンシブでスマホ表示も対応。
４．
jqueryとCSS3の併用で動きを付ける。
見出しテキストのカタカタ…っていう中二病的エフェクトや、
メニューボタンの動きあたりがそれ。
５．
ここまでは静的なページ。
毎回HTMLいじって更新するのもいいけど、
ブログも作って頻繁に更新していきたいなーということでWordPressを導入。
動的にページ生成される作りに。
６．
WPは無料テンプレートもたくさんあるけど、
余計な機能やデザイン要素がゴッソリ付いてきてしまうので、
一からオリジナルテーマを制作することに決める。
７．
いきなりアップする前にまずローカルで動作チェックしながら作りたいので、
「Instant WordPress」(windows) をインストール。
XAMPP や MAMP あたりがメジャーだけど、winならこっちの方が簡単。
８．
WordPress用のphpを書いていく。
（共通部分のパーツ化とか、ループ文とか、テンプレート階層とか）
９．
ポートフォリオはWPの通常の「投稿」で更新できるようにしたので、
ブログには「カスタム投稿タイプ」を採用。
これは定番プラグイン「Custom Post Type UI」で対応。
10.
Contactフォームも定番の「Contact Form 7」を採用。
お問い合わせフォームを設置。
11.
ブログ（このページ）だけは３カラムに。
SNSボタンもプラグインで設置。
定番「WP Social Bookmarking Light」…と思いきや
意図せず通常投稿のポートフォリオページにも付いてしまうので、
「Tweet, Like, Share and Google +1」というプラグインに切り替え。
この辺は臨機応変に。
12.
最後まで作り終えることが大事…！と言い聞かせて公開。
ほとばしる勇気。
ざっくりすぎてすいません…。
細かく知りたい方がもしいたら、メールフォーム等から質問ください。
ちなみにたまに動画編集とかもやることがあり、
根っからのAdobeユーザーなので、デザインはPhotoshop、
コーディングはDreamweaverを使ってます。
よく「やっぱりデザインやるにはMacですか？」とか聞かれますが、
関係ありません。
僕は両方使ってます。
必要なのはAdobeへのお布施です。
という感じで、初回はとりいそぎこの辺で。
ではでは。
P.S.
先日、converseホワイトアトリエという
原宿のショップの1周年記念のお祭りがあり、
遊びに行ってきました。
地下の室内でわたあめ振る舞ってたりして、賑やかでした。
お祭りってやっぱりテンション上がりますね。
筆者近影
