とりあえずひと通り知っておこう!2014年の気になる物を色々試してリニューアルしてみた制作の流れ!

WEB制作

さて、先日バンクーバーな僕らをリニューアルしました。得に特別な事をしたわけでは無いのですが、ここ最近とにかく会社の事やらシェアハウスの事やらでテンヤワンヤしておりまして、自分の制作環境の話等を書いておらず、情報が昔のままになっていたので、今日はさっきまで色々試しながらこのサイトを作ってたという事もありますし、忘れない内に覚えてる範囲で備忘録的に書いておこうかと思います。

恐らく今後もどんどん変わっていくかと思いますし、まだまだ学び途中の物も沢山ありますが、まずは参考にした物も含め共有させて頂きます。去年書いた記事と比較しながら読むとちょっとは楽しめるんじゃないかと思います。

また、このブログでは何度か触れていますが、もはや僕はクライアントのために手を動かして何かを作るという事が殆ど無くなってしまい、もはやデザイナーでもコーダーでも無いような気がするので、こういった制作記事を書く前提としてとりあえず『それが何かを知る事』と、『どれだけの時間短縮に繋がりそうか意識すること』の2点のみに注力して実験的に進めている感じになっちゃっています。

そんなのあるんだ的なレベルで見てもらえると丁度良いかなと、それでは行ってみましょ〜!

 

スクリーンショット 2014 08 26 午前4 49 05

こんな感じになった!

 

目次

 

ワイヤーフレーム

ワイヤーフレームについては以前お伝えしたことがありますが、僕は最近だと基本手書きです。もうパパっと書いてパパっと作り出す事の方が圧倒的に多いです。クライアントワークの時もそうでしたが、もう最初の顔合わせのタイミングまでにある程度の情報収集と調査分析は済ませておいて、その場でワイヤー描くくらいの気持ちで行きます。一回持ち帰る事は時間勿体無いので、できるだけしないようにしたいです。

そんな時あると便利なのがUI Stencils。これは以前記事にしたこともあるので、気になる方は是非ご覧ください!

あとは、結構周りにはSketchを使ってる人も多いようなので、もしSketchを使うようであれば『Sketch UI Element』とかで検索するとUI素材が大量に出てくると思うので、そこから用途にあったレイアウトやUIデザインを引っ張ってきて作っても良いかと思います!

 

グリッドシステム

もはや僕にとっては無くてはならない存在となったグリッドシステム。あると便利のレベルじゃないですね。なくちゃ始まらないくらいになってきています。と言っても、グリッドシステムに依存するような形のフレームワークは使いたくない。それが無くなったら完全に痛手になるような物だと、いざチーム間で使用する場合であってもレクチャーするのに時間を要してしまうし、何より自分でそのフレームワークの全てを理解するのは困難な場合が多い。中には全てを理解しなくてもパフォーマンスにも影響が少なくなるようなフレームワークも多いので、全部とはもちろん言いませんが、これだけ沢山のフレームワークに埋もれていると、それに頼りっきりになることによってどんなデメリットがあるかを調べるのも一苦労だなと最近は思うわけです。

というわけで、僕自身がそんな考えの元で使っているグリッドシステムは以前もこのブログで紹介したこともありますが、未だに『Responsive Grid System』を利用しています。

フレームワークはころころ新しい物が登場するので、これを使い出した時も「1年保てばいいほうかな。」とか勝手に考えていたのですが、今のところはまだまだ使い勝手はこれが一番。僕が記事を書いたのもかれこれ1年以上前になるんで、僕自身はもっと長く使っている事になります。まぁ、慣れが大きい部分もありますが…

僕が日本でWEBを教わった先生も、今年の6月に記事をUPしてくれていたので、解説はもはやこちらを見たほうが良いかと思います。

 

Photoshop関連

Photoshop周りの事は、もはや僕がとやかく言うよりググった方が早いと思うので、僕自身が使っているTipsっぽい部分だけご紹介しておこうかと思います。

 

スライスは時間がかかる?

個人的な考えもあるのかもしれませんが、CSS3が普及し、CSSで表現出来る幅が広がるにしたがって、画像としてPhotoshopで書き出すという行為自体、本当に少なくなりました。そうすると、スライスしてWEB用に保存してという一連の流れが非常にめんどくさく感じるようになってしまい、どうにか効率化出来ないものかなと思っていた僕のTipsを2つ紹介しておきましょう。

Cut&Slice me

スクリーンショット 2014 08 23 午後9 12 13 2

一つ目は以前ご献本頂きました『神速Photoshop [Webデザイン編] 』で知った、Cut&Slice meというエクステンション。Photoshopのエクステンションは色々使ってるんですが、これは非常に使い勝手の良いエクステンションで助かります。

名前の通りというか、エクステンションを起動するとわかるのですが、ボタン一つで選択中のレイヤー画像のエクスポートが可能です。スライスして、保存してという一連の流れがボタンひとつで終わるので、非常に楽です…が、Photoshop CC 2014から、何やらエクステンションの追加がオンラインからじゃないと出来なくなったとか、ならなかったとか。とにかく現在CCまで使っていたエクステンションをCC 2014に引き継ぐ事ができません。泣けてきます。号泣モノです。

 

Retinize It – Photoshop actions for slicing retina graphics @2x

スクリーンショット 2014 08 23 午後9 17 40 2

というわけで、こちらもついでにご紹介させて頂きます。「Retinize It」。これは僕がCut&Slice meを使う前からずっと使っているPhotoshopアクションなんですが、アクションボタン一つで選択中レイヤーの書き出しが可能です。アクションの名前からもお分かりの通り、Retina対応用の画像を書き出してくれます。

別にRetina用に書きださなくていいから、普通に書き出したい時は、このアクションをインストールすると『Slice It!』と『Retinize It!』の二つのアクションが追加されると思うので、Slice Itの方を押すだけだと通常サイズで書きだしてくれます。機能は少ない分、よりシンプルで使いやすく、尚且つエクステンションとは違いアクションなのでバージョン間の相違も起こりにくそうで僕は好きですね。

もちろん、書き出しレイヤーがそもそも解像度低い場合等に無理やりRetinaサイズへ引き伸ばしてくれるというわけではなく、あくまでもスライス機能です。しかし、この一連の動作にこれまで一体どれだけの時間を費やしてきたのかと思うと…

本当にありがたいですね!

 

グリッドシステムのPSD

さて、先ほどグリッドシステムを使うと言った以上、PSDでデザインする時も当然グリッドシステムを使うわけであります。が、しかし、もう色々と出尽くしてる感というか、ぶっちゃけもうどれでもよくね?って思うんですね。特に、どうせ今回のサイトの場合はレスポンシブで作るし、PCサイズよりスマフォの方を重視し、モバイルファーストで作る場合って事を考えると、PC画面をベースにしたデザイン(グリッドを意識したデザイン)はそこまで重要じゃない…と、僕は思ってたりします。なので、MaxのWidthとカラム数だけ抑えておけば、PC画面のデザインはちょちょいのちょいと作ってしまって良いかなと。

というわけで、今日はこの辺りには特に力は入れていないので、ここも便利エクステンションやサイトの紹介をして終わろうと思います。

GuideGuide

スクリーンショット 2014 08 25 午前2 18 18 2

GuideGuideは、名前の通り、ガイドを生成するためのエクステンションです。16カラムでカラム同士の間に20pxのマージンを設定し、左右には大きく余白を空けて…みたいな細かいグリッド操作が可能です。…とは言え、こちらもエクステンション… CC 2014からは使えないのかなぁ。オンラインから宝探しみたいに似た物を探すしか無いんでしょうかね。

そういう時は960 Grid Systemなんかの有名ドコロは勿論、今だと1200 Grid SystemなんかのPSDも普通にあるし、別に困りはしないんですが、やっぱ自分でPSDのテンプレ用意しとくのが一番ですねー。

 

コーディング関連

ここも得に去年の今頃と大きく変わった所は無いわけなんですが、あるとしたらこの後紹介するGrunt等の開発環境の方なので、ここもさらーっと行こうと思います。

 

Emmet

今年もこの調子だとSassとEmmetを使ったコーディングが主流になりそうです。SassやEmmetを使ったコーディング周りの事はググれば色々出てくると思うので、とりあえずEmmetコーディングをまだ使ったことが無いという方はこちらをご参考にどうぞ。

こういった記事で、Emmetの便利さが分かったのであれば次はチートシートでも見て、色々試してみましょう。これだけで、コーディングのスピードは格段に上がります。

ただ、個人的にEmmetから使えるようになった、『^』 を使った階層移動はあまり使っていません。『()』で十分対応が可能だと思うからです。

適当で申し訳ないですが、階層移動を行う『^』を使った移動より、個人的には『()』を使った同階層の指示の仕方の方が、個人的には直感的に分かって好きかなと。でも『^』も知ってると便利な瞬間は確かにあるので、両方の使い分けがちゃんと出来るようになってると更に良いですかねー。っていう雑記でした。

 

Sass

LessとSassの壮絶?なバトル?は未だに行われているのでしょうか。最近はSass勢の方が周りに多いという印象はありますが、個人的にはまだまだSass Loveって感じです。Sass周りは以前バンクーバーでSassレッスンをした時に、やっぱりCompass周りと一緒にSassを学ぶのが一番習得早い気がしているので、Sassに手を付けるのに参考にするとしたらLigさんの書かれているこちらの記事が文句なしに一番よくまとまっているかなと思うので、是非ご参考にどうぞ!

その上で、Extend機能についてだけ、ちょっと深く知っておきましょう。

mixinや変数による指定等は当然便利なんですが、それ以上にこの記事に書かれているようなOOCSS的な考えの上でExtend機能を使うように、個人的には心がけているつもり…というか、人には伝えるようにしているつもりなので、一応ご紹介させて頂きました。

この二つの記事で十分実践的なSassコーディングは理解し、実践出来るかと思います〜。

 

Grunt

スクリーンショット 2014 08 26 午前2 50 55

元々はSmashing Magazineが去年取り上げてからずっと使ってみたかったのですが、とにかく今年は頭から起業やらシェアハウス設立やらで忙しかったので、放置していました。

Gruntとは、開発上の様々なタスクを管理/実行することが出来るタスクランナーツールです。去年から複雑化するWEB制作の現場でもどんどん導入され続けており、僕自身も最近だともう手放せない物になりつつあります。

Smashing Magazineの記事を見る限りでも、十分色々な事が出来るのがわかると思うのですが、ざっと見る限りでもSass、画像圧縮、HTMLHint(構文チェック)、UglifyJS(JavaScript圧縮)などなど、開発環境として使うであろうツールがゴマンと実装されています。

これらをGrunt無しに使おうとすれば、「SassのコンパイルはCompassでやって、HTML構文チェックして、UglifyJSでJavaScript圧縮して、画像の最適化して、修正したらブラウザをリロードして更新して」と、一つ一つの作業はそこまで時間がかからなくても、つもり重なればそれはとんでもない時間になります。

僕自身が今回使ったのは、Gruntの機能の中でも最低限の物で、Compassを利用したSassコンパイル、あと画像の最適化、それからライブリローディングの3つのタスクをGruntで実装してみました。

これだけでもかなりの時間短縮に繋がってくれると思うのですが、画像圧縮だけはJPEGminiや、ImageOptimの方が断然圧縮率はよく、ちょっと考えものって感じもしました。結局僕は圧縮しなおしましたし。

とりあえず今回は最低限、Sassコンパイルやライブリローディング等の機能だけでも実装してみて、またいずれ他の機能も試してみようって事で、以下の記事が参考になりましたので、こちらも共有させて頂きます!

基本はたぶんここで十分。

あとは、今回のCompassとライブリロードの機能に関しては、こちらの記事でまとまってるのが一番分かりやすいかなと思ったので、こちらも共有。

やべー、書くこと無くなった。どうしよう。

ただ、ここまで書いておいてなんですが、最近はGruntに置き換わってgulpがキテる的な記事を多く見かけます。

というわけで、もう次はgulpを使っているかもしれません。記事にしといてアレですが、とりあえずGruntにしろgulpにしろ、こういうタスクランナーの存在はもはや必要不可欠って事だけ僕の中では確信めいている事でしたので、ここでご紹介させて頂きました。

 

以上、いかがでしたでしょうか?

たかだか数ヶ月のブランクがあるだけで、もうこんなに制作環境が変わってしまっていたのかと、ちょっと時代の流れ的な何かに振り落とされないよう着いて行くのが本当に大変だなと思う今日この頃ではありますが、落ち着く時は来るんでしょうかね。たぶんこねーなーとw

やっぱりWEB制作者は『学びの時間の確保』が必須条件となる職種って事なんでしょうね。なんでもそうなんだとは思いますが…

というわけで、ちょっとでも皆さんの学びの発見にでも成れれば嬉しいですね〜。ではでは。

Pagetop