こんにちは。石原です。
最近、ダイエットに勤しんでいます。栄養が足りないと、脳みそも回転率が落ちるんですね。
そんな状況の中ですが、今日はじっくり考えて見たいと思います。
目次
“Webサイト制作” におけるツール・技術選定について
HTML、CSSを学んでから、かれこれもう5年程でしょうか。
その間、HTML5.1が勧告されたり、Node.jsが広まったことにおける制作環境が変化したり、バージョン管理が浸透したり、jsのフレームワークが流行ったりしました。
デザインツールもFireworksがなくなり、SketchやAdobe XDが登場しましたね。
いろんなツールや技術が登場してくるたびに、「これからはこれ！」「そのやり方はもう古い！！」といった記事も合わせて登場する気がします。
しかし、本当にそれは正しいのでしょうか？ ツールを導入する、技術を選定するということは、それなりにリスクを伴います。
Webといえどもカテゴリは幅広くあります。 Webアプリなのか、Webサイトなのか。Webアプリでも自社サービスなのか、受託案件なのか。
ツールや技術の採用は、コンテキストによって条件が変わります。どのようにその条件を身極めれば良いのでしょうか。
1. 技術の採用について
ツール・技術の背景を知る
極端な例ですが、HTML5の例を出します。 なお、これは組織として技術導入をする視点から書いています。
なぜ、HTML5が登場したのでしょうか？ これまでのHTML4.1や、XHTMLでもWebサイトを表現することは自由にできたはずです。 Webサイト制作寄りの方は、特にそのような印象を受けたのではないでしょうか。 新しいタグが出来たり、新しいルールが規定されていたり、、、 しかし、大部分はこれまでのHTML4でマークアップしても、HTML5でコーディングしても、特に問題なく実装できていたのではないでしょうか。
今でも、HTML5でなんとなくコーディングする方は、一定数いらっしゃると思います。 しかし、それは当然なのではないでしょうか。 HTML5は確かにタグや属性、セマンティックWebに向けて整備された仕様です。
しかし、HTML5が話題に上がり始めた時、その大部分はHTML5自体の仕様ではなく、合わせて作庭されたAPIだったり、Webアプリケーションの開発方法としてのHTML5だったような気がします。
実際に、今では、FlashやSilverlightといったサードパーティ製のプラグインを見事に置換することができました。
第一次HTML5ブームの主たる目的はリッチなWebアプリケーションが開発できることに全振りされていたのではないかと思います。
当時の勉強会やセミナーでは、HTML5でこんなことまでできるよ！とか、テレビとかでもHTML5使われてるよ！とか、そんな内容もたくさんあったかと思います。
しかし、ここで考えなければいけないのはHTML5の目的と、現実。 つまりは自分が直面する業務です。
HTML5によって、いろんなAPIが提供されて、いろんなことができるようになった。うん。こらはわかる。では、実際にこれが自分の業務にどんな影響を与えるのか。
Webアプリケーションを作ることなかったら、そこまで頑張らなくてもいいのではないでしょうか。
学ぶのであれば、Webアプリケーションを構築できるだけのスキルと、会社でプロジェクトを回せるだけの土台と、いろんなものを考える必要があると思います。
HTML5の目的から考えると、Webアプリケーションは実業務で取り扱うのか、そしてそれだけのスキルが自分にあるのか。 それを問いかけることになります。
逆にないのであれば、もっと根幹的な技術を勉強する必要がありますね。
このように新しい技術に対しては、その目的がなんなのか。そして、自分の状況と照らし合わせてみる。 そんな思考が必要ではないでしょうか。
React とか Angular とか
React とか Angular といったフレームワークで、フロントエンド業界は日々話題が尽きない状態です。
しかし、これも「Webアプリケーション」において有用な開発手段であって、そこまでJavaScriptでゴリゴリコーディングしないようなWebサイト制作においては、正直なくても全然困りません。
そもそも、Webアプリケーションにおいても、そこそこ大きくないと導入するメリットはないのではないでしょうか。人集めるのも大変でしょうし。
僕らのようなWebサイト制作屋さんが、「これからは Angular.jsだ！とりあえず使ってみよう」という安易な気持ちで導入したところで、Angular.jsについて責任が持てるでしょうか。
きっと、1〜2年後にはメンテナンスもおっくうになっているに違いありません。
200,300行で実装できる規模であれば、よっぽど生のJsか、jQueryに依存して書いた方がいいように思えます。
食わず嫌いはだめ
とはいえ、この世界でも食わず嫌いはダメです。新しいライブラリやフレームワークがなんかバズってる！と感じたら、とりあえず動かしてみる。そして、その技術の背景と、目的を理解し、 自分の現状を合わせて考えてみる。
これは、絶対すべきことです。新しいものに対して食わず嫌いになると、そのまま取り残されることになります。
技術採用に対するまとめ
ここまで、「組織として技術を採用するなら、一旦考えてみよう」的なことを書いたのですが、個人となると話は別です。
フレームワークやライブラリを学ぶことを、それがそのままスキルアップに繋がります。 それによって組織体制が変わったり、事業内容が変わったりする可能性もあるとは思います。 また、当然転職の選択肢も増えるでしょうから、「勉強」することは大切です。しかし、プロジェクトに導入するのは一旦落ち着こうかという考えです。
2. デザインツールについて
さて、話は代わりまして、今度はデザインツールについてです。 Adobe製品が当たり前だったデザインツールも、時代とともに入れ替わりを見せつつあります。 Sketch、Adobe XD、最近だとFigmaとかもチョロチョロ聞くようになりました。
Sketch ももう直ぐローンチされてから7年。だいぶこの業界でも利用されることが多くなってきた気がします。
Adobe XD はまだベータ版ではありますが、徐々に人気も集まりつつあるように感じます。
なぜ、登場したのか
なぜこの二つのツールは登場し、世の中で広く使われるようになったのでしょうか？
紐解くキーワードは、制作物の多様化、そして制作フローにあるのではないかと考えています。
1. 制作物の多様化
スマートフォンが世に広まってから、Webデザイン、ソフトウェアデザインの他に、アプリケーションデザインも大きな市場として広がりました。
また昨今では、Webアプリケーションもありますし、Webサービスも以前よりは複雑で規模の大きいものがたくさん世に出回っています。
Webデザインでも、スマートフォンやタブレットへの対応にレスポンシブWebデザインという方法がオーソドックスになった今では、それまでよりも格段にデザインの難易度は上がり、知識を要求されます。
そんな中、重要になるのはスピード。Webデザインにおいては単純に端末分デザインするから。 アプリケーションにおいては、次の項で説明しますが、こちらもデザインを作る回数は格段に多くなったではないでしょうか。
Sketch も、Adobe XD も、プロジェクトを立ち上げてからアセットとして書き出すまで、果てはその後の運用にもシンボル等で汎用性を設計することもできます。
2. 制作フローの変化
UXデザインという概念が広まってから、デザインを作ってはテストし、作ってはテストし、、、そんなプロトタイプ型のフローに変わりつつあります。
Adobe XD なんかは、それがメインの目的ですよね。 何回も作り直すということは、それだけ効率化も求められます。 スピードが求められることはもちろん、求められる機能も違ってきます。 プロトタイプ作成系のサービスも多々登場しましたが、Sketchでもプラグインで簡単に連携できたりしますし。
何を犠牲にするか
スピードへとシフトしていっているデザインツールですが、その反面切り捨てていることもあります。
基本的にできることは Illustrator や Photoshop よりも少ないですし、フォントなどは、できることは限られています。
汎用性という面でも、人口的にはまだまだ Illustrator や Photoshop を使っている人が多いのではないでしょうか。
Webサイトにおいて、すべてのプロジェクトに対して Sketch や XD といったデザインツールを導入するのは、やや危険に思えます。
そこで大切なのが、「Webサイトの目的」について考えることです。
デザインするWebサイトの目的はなにか
例えば、次の条件のようなプロジェクトの場合は、どのツールを選択するのが最も効果的なのでしょうか。
- 新規に参入する市場である。もしくは、ターゲットユーザーが仮説でしかない。
- 運用も含め、プロジェクトに長期的に携わる。
この条件の場合、プロトタイプ型の制作を進める可能性が高くなります。 ローンチまで素早く作り、実際のテストを含めWebサイトを改善していく。 そんなフローになる場合には、Sketch や Adobe XDといったスピード重視のツールを使った方が効果的に思えます。
では、次のような条件ではどうでしょう。
- リニューアルプロジェクトであり、自社プロダクトの良さをユーザーに伝えたい。
- ローンチと同時にカタログやパンフレットなどの印刷物も作る予定である。
この場合、最初のローンチ時にクオリティを最大限まで高める必要があります。 Illustrator や Photoshop といったデザインツールを使った方が、クオリティについては、細部までこだわることができますね。
Sketch や Adobe XD よりも、Illustrator や Photoshop といったツールのほうが、Webサイトの目的に貢献できる場合もあると私は考えています。
コンテンツによってデザインツールを使い分ける
Webサイトによっては、コンテンツにプライオリティを付与することが多いと思います。
例えば、こんなことはできないのでしょうか。
- サイト内でも重要なコンテンツは、Illustrator や Photoshop で制作する。
- さほど重要ではなく、今後も流動性のありようなコンテンツ(いったら原稿をフォーマットに会ってて流し込むようなコンテンツでしょうか)については、Sketch や Adobe XDで制作する。
こんな使い分けが、プロジェクトの質と、プロジェクトのスピードを上げる上で重要になるのでは無いかと思います。
これは、どんな制作体制でもできるわけではありません。まず、組織内での一貫制作でなければこのようなアプローチは難しいのではないでしょうか。
コーダー側も XD や Sketch に対する知識を学ぶ必要がありますし、コンテンツに対する考えをチームで綿密に共有する必要があります。
組織としてツールを導入することで、より最適な作り方を選択できるんじゃないかと考えています。
まとめ
技術、そしてツールを導入する時に考えることとして、
- 背景と目的を知る
- 自分の現状において考える
- 様々な方法で使える方法がないか考えてみる
この2点をこんな長々と書いてしまいました。 当然のようで、失敗することも多いことかなと、感じています。 しかし、新しい技術やツールをいつまでたっても導入しないは、この業界ではおいていかれることになります。
どの時点で導入するのか、その判断が難しい…しみじみ記事を書きながら感じました。
