【コーディングで仕事受注-1】photoshopからコーディング練習
完全ど素人な僕が、webプログラミングを勉強〜クラウドソーシングで仕事を受注したい！と思い立ったのが4月くらい。はや4ヶ月くらいが過ぎようとしています。当初の予定より大幅に遅れていますが、とにかく前進しなければ！
しばらく、（今の所）本業で忙しくなってプログラミングから離れてしまっていましたが、色々と学んだことを思い出しつつ、プログラミングをギリギリ仕事可能なレベルにしていくために、選んだ手段はphotoshopからのコーディング。
ドットインストールなどの「教えてもらう」形式だと、一通りwebサイトを作ることはできるようになるのですが、あくまで教えてもらいながらなので、できて当然といえば当然。より実践的に学ぶためにデザインデータからコーディングすることに挑戦しよう！と考えました。
コーディングの練習をする場合、多くの場合は実際に存在しているwebサイトを見ながら、同じ形、機能を構築していく「模写」というやり方が主流みたいです。
ただそのやり方だと画像部分やテキスト素材をコピペするなどして自分で用意しなければいけないし、実際の仕事とは若干違うやり方になってしまいます。
より実践形式かつ仕様素材の用意などが楽、かつ初心者に適切なレベルのwebデザインをコーディングするためにどうしたら良いのだろう・・・と考えていた頃に、web上でコーディング用にphotoshopでのデザイン指示データを作成・配布してくださっている方を見つけました！
有料ですが、初心者にはちょうど良く難易度高めなので、興味のある方は以下を是非。
コーディング模写【実務が体験できるpsdデザインカンプからのコーディング】
今回は、こちらのデータを使用してコーディングをしていく上で大変だったこと、学んだことなどをまとめていきます。
photoshopデータからのコーディング手順
おそらく、実務でも大体同じ工程になるのかな？と思います。
デザイナーさんから受け取るデータはphotoshop、illustratorなどで指定されていて、それを元にコーディング（webサイトとして機能するようにhtml/cssで記述）していくことになります。
僕はwebデザインを仕事で受けた時にはillustratorでデザインデータを作ってコーダーさんに渡していましたが、（僕がディレクターとして）webデザイナーさんとお仕事させていただいた時は、webデザイナーさんからあがってくるデザインデータは100%photoshopでした。photoshopが主流なのかな？と思います。 どちらにしても、作業手順は以下。
- photoshopから画像データの切り出し
- photoshopデザインの寸法を計測／大枠をhtml・cssで区切る
- 細かいhtmlの書き込み
- cssで見た目を整えていく／必要ならjavascriptなどを追加していく
だいたい、どんな仕事でもこんな感じなのだと思います。一つずつ振り返ってみます。
1. photoshopから画像データの切り出し
photoshopのメニューから「ファイル > 生成 > 画像アセット」を選択、チェック。
すると、レイヤー名を名称 + 拡張子に変更するだけで、photoshopが自動的にそのレイヤーを1枚の画像として書き出してくれます。
例えばphotoshopのデザインにトップ画面用の画像がある場合、その画像レイヤーの名前をダブルクリックして選択、「top-img.jpg」などの名称に変更します。
これだけで、photoshopデータと同じ階層に「top-img.jpg」という名前の画像データが勝手に作成されます。
これだけ。楽チンです。
この作業をする時に僕がポイントだなと感じたのは、以下のこと。
- どこを画像にするか？
- およそ、このwebページの構造はどうなっているのか？を把握する
「どこを画像にするか？」ですが、なんでもかんでも画像にしちゃうとwebページが重くなるし、google検索にも引っかかりづらくなります。（何よりコーディングしている側として面白くないし）
なので、写真などの画像部分の他は、極力htmlのテキストベースで再現したい。こちらで持っていないデザインフォントが使用されている場合にも、なんとかwebフォントサービスなどを駆使してテキストベースで実現したいし、特殊な配置（例えばアーチ上の文字レイアウト）もテキストベースにしたい。
「webページの構造を把握する」ですが、写真部分のレイヤー名を書き換えつつ、このデザインはどこを画像にしなければならないか、しなくても実現できそうな手段は何か、とかをなんとな〜く想像していくようにしています。その過程で、「この項目はdivを3階層つくって、1つめで〜して2つめで〜して・・・」と、およその構造もイメージしていきます。
画像書き出しの名称を決める時にも、階層や要素数を意識しておかないと、似たような名前の画像が溢れかえって、のちのちややこしいことにもなりますから、「構造をなんとな〜く想像しておく」はとっても重要だな、と感じました。
2. photoshopデザインの寸法を計測／大枠をhtml・cssで区切る
各要素のサイズを細かいところまで計測してメモしておくなどでも良いですが、とりあえず作業を進めるためにも、僕は大きな枠組みのwidth、heightだけをささっと調べて、html、cssでとりあえず区切りをつけるようにしました。
例えばヘッダー、グローバルメニュー、メインコンテンツ部分の幅、2カラム構造ならメイン・サイド領域の幅やその間の空きのサイズ、フッターのサイズなど。
こういう大枠の構造と大きさだけをまず測ってhtmlの各項目をクラス付、cssで領域のサイズ指定、backgroundcolorで色付けしておきました。そうするとデザインするデータの雛形みたいなものができるので、その後進めやすくなるかなーと思いました。
あと、サクサク進むので「やってる！」感が実感できて楽しい。ちょっと「できる人」っぽい気分に浸れました（笑
3. 細かいhtmlの書き込み
これは良いやり方なのか？わかりませんが、今回の僕は、上記2で作った各大枠の中に、前もっていくつかの<div class>などを先に書いてしまいました。
Photoshopデザインとにらめっこしつつ、およそどれくらいsectionやdivで区切って定義づけていけばこのデザインが実現するのか、予測することで勉強になりますし、進めるのが楽チンにもなります。
あと、実践的なデザインをするとなるとどうしてもclassやidを多用することになるので、それぞれのネーミングをわかりやすく、重複しないようにしなければなりません。先んじて構造を読んでおくことでclass、id管理をしやすくなりますし、class名などをつけていく過程で構造や各要素の意味付けを自分の中で再定義していけるので、理解も進みます。
その後、1で書き出した各画像を張り込み、テキストをphotoshopからコピペしてきてhtmlを作り込んでいきます。
このあたりから、次節と並行してhtmlで要素を入れつつ、cssで形を作りつつ進めていくことになりました。プロの方の場合は完全に分けてやるのだろうか？わかりません。。
4.cssで見た目を整えていく／必要ならjavascriptなどを追加していく
あとはもう、そのまんまなのですが、こっからが大変なところでもあります。3で考えて用意していたclassなどもブリブリ増えていきました。。
cssって文字色を変えたり大きさを整えたりと、そんなに難しくないだろーと思っていたのですが、今回チャレンジさせていただいたphotoshopデザインは、絶妙に色々な試練にぶち当たるようになっていて、結構苦労しました。
特に苦労した点は次の章で列挙していこうと思いますが、ここの苦労を経て、コーディング終了となります。
コーディングは、めっちゃ特殊な構造でなければ大抵は努力と根性で達成できると思うのですが、問題はその実現スピードです。僕は・・・この1ページのコーディングだけで三日くらいかかりました（泣
まだまだ実用レベルとは言えませんね。。
コーディング経験で困ったこと、便利だったコード
困ったこと1_結局javascriptなどが必要だった
すごく動的なサイトデザインではなかったのですが、「文字を円弧上に配置する」「メインビジュアルをスライド式にする」「標準のwebフォント以外のフォントがデザイン指定されていた」など、いくつか試練的なものがデザインにあったので、苦労しました。
特にスライド式ですが、これは企業系のサイトなどでよくある、トップページのメインビジュアル部分のイメージ画像が何枚か数秒ごとに自動で切り替わっていくやつです。
これって、おそらくjavascript？の領域みたいなのですが、そこをまだ勉強していないためやり方がよくわからず、ググった結果、swiperというのが便利かつ簡単に実装できそうだったので、導入することにしました。
ただ、このswiperというのもjavascriptを利用した機能なので、結局はよくわからないままにjavascriptを利用することになり、大変な目にあいました。たぶん、swiper関係で1日くらい費やしていると思います。。
有料のphotoshopデータの内容を勝手に公開できないのですが、簡単に言うとメインビジュアル部分が
- スライドする
- 写真の上に乗算？などでビジュアルエフェクトが重なっている
- さらにその上に他の情報項目が重なって表示されている
という感じで、swiperとそれらの諸条件をうまく全て実現するのに、えらく手惑いました。 特にswiperはどのデータの、どこの部分をいじれば良いのかもわからず（汗
swiperに関しての結論だけでいうと「swiperのデータは何もいじらない」で「新しく◯◯.js」というjavascript文書を作成、必要な項目を書き足すことで良かったみたいです。（htmlのhead部分にjsへのリンクを貼るのを忘れずに！）
何を書き足すか？はコーディング内容によって違うと思いますが、大抵の機能はググると出てくるし、何よりswiperの公式デモページに機能サンプルが大量に置いてあるので、そんなに困らないと思います。
swiperの公式デモページはこちら。
僕は「どこに記述すれば良いの？」という初心者以前のレベルだったので苦労しただけでしたね。。
swiper以外にもjQueryで円弧上に文字を配置したり、adobe font scriptでお目当てのフォントを読み込んだりと新しく挑戦する技術も多く、「コーディング」は結局javascriptなどを全く知らないとなかなか完成させるのは難しいのだなと感じました。
困ったこと2_重なったり、はみ出して表示したりする要素が多かった
全てを四角くボックスで囲み、その中に文字と写真を配置する、というだけのデザインだったら楽チンなのですが、実際のデザインでは写真の上に表組みが存在したり、四角い枠から切り抜きの人物写真がはみ出て表示されていたり、いろんな要素が横に並んだり、縦にならんだり・・・と位置関係の指定で苦労することが多かったです。
今まで、学習サイトなどでwebプログラミングしていた時にはほとんど使用したことがなかったのですが、この実践的なコーディングをする時には「position:relative」「position:absolute」をめっちゃ多用しました！
このposition機能はめちゃくちゃ便利だしよく使うので、relativeとabsoluteの使い方、関係性は色々試してしっかりマスターしておく必要があるなと感じました。めちゃ便利！！
ちょっと本筋とずれますが、vertical-align: center;という、要素を天地中央揃えしたい時に使うコードがあるのですが、これが全く使えない。どうも使い方にルールがあって、僕がそれを理解していないからいけないのですが、今まで紙のデザインをしていてめちゃくちゃ使っていた（そして難易度0の）機能を手軽に使えないことは、非常にストレスでした。
Vertical-alignを記述すれば、なんでも天地中央にちょちょーんとさせてくれれば良いのに・・・。
結局、簡単に実現する方法は未だにわかっておりませんが、確実に実現できたのは、以下。
- position: absolute; top:50%; ←天地中央にしたい要素の「頭」が天地50%のところにくる（つまりちょっと下めに配置）
- transform: translate(0, -50%); ←要素自体の天地50%分、上に移動する
これで天地中央ができました。
結論：positionは便利！
実践してみて便利だった／多用したcssコード類
html上ではそんなに真新しいことはしませんでしたが、cssの方は新しいことづくし&勉強になることづくしでした。
【font-feature-settings: “part” 1;】
一番感動的だったのは、文字詰め。
font-feature-settingsでプロポーショナルメトリクスが有効になる！webってベタ組みしかできないのかと思ってました。これで文字をつけられる！！というのでかなりテンションあがりました。
それ以外にもtext-align: justifyで箱組みができたりもするらしいです！技術の進歩ってすごいなー
【z-index】
positionをよく使うようになった理由は、もちろん重なり合う要素がそれなりにあったからなのですが、重なり合う要素が色々あると、「どっちが上に表示されるか（つまり、どちらの要素がもう片方の要素の下に隠れてしまうのか」という、photoshopやillustratorでのレイヤーの上下関係みたいな問題が出てきます。
Z-indexは、各要素ごとに記述してz-index:1;みたいに数字を入れていくことで、重なりの上下関係を指定することができます。
ちなみに、かなり最後まで勘違いしていましたが、数字が大きいほど、重なり順は上です。（逆だと思ってた・・・）
【mix-blend-mode】
multiplyで乗算、overlayでオーバーレイなど、photoshopなどでの基本的な機能が使えます。今回はトップのスライドイメージの上にエフェクトを重ね合わせるのに使いましたが、知っておけば表現の幅が増える便利機能だと思いますし、難しいことが何もないです。positionと一緒に使うことが多そうな機能。
まとめ
いかがだったでしょうか。
コーディングはwebプログラミングのお仕事をする上での基本中の基本ですが、初心者的にはとっても難しく、学びも多かったです。
今回はプロの方による初心者練習用のphotoshopデザインデータを使えたので、余計なことは気にせずにコーディング勉強に集中できてとてもよかった。
こういう練習用データが充実していれば学習もはかどるのですが、そんなにたくさんは存在しなさそうだったので、今後は実在するサイトの模写なども含め、より一層勉強に励んでいって、半年以内にはお仕事受注まで行ければ良いな〜と思っています。
引き続きレポートしていきますので、今後ともよろしくお願いいたします。今回は以上！
