先日個人的にWordPressのお仕事いただいて自分で開発環境を作っていたのですが、ふとこの工程を自分でできるWebデザイナってどのくらいいるのかなと疑問を覚えました。

幸い私は大きなトラブルなく構築できた(以前似たような構成の案件があった)のですが、従来案件確定の段階で重要視されるのはスケジュールや予算で開発環境の構築難易度は次の行程になってしまい、この段階で自分でもらったデータで環境構築できないって話になると依頼くださったクライアントさんにも迷惑かけるなと思うとちょっとドキドキしてしまいました。

Webデザイナがデザイン業務以外のスキルを求められるシーンを見る機会が増えてきたので自分の中で整理しました。

そもそも開発環境をWebデザイナが作れる必要があるのか

Webデザイナのメインの業務はWebサイトを作ることなので、案件に合わせて開発環境を整えれる必要があるのかという疑問を持つ方もいるかと思いますが、業務をするにあたって、特定の誰かがいないと仕事をスタートできないというのは自分のスキルを発揮する機会を損失すると私は考えています。
※Webデザイナがコーディングもする前提での話になります。

Webデザイナがこんな事せず、プログラマに任せれば良いといえばそうかもしれませんが、現実的にはWebデザイナの身近にプログラマが必ずいるわけではありませんので、その前提で話をするのは無理があると思っています。

なので、Webデザイナも自分でこれらの事は出来るようになったほうが良いとは私自身思っています。

開発環境が自前で用意できないとデザイン/コーディングをするというするといった本来やるべき事に達することができないような状態になり、スキルを発揮できる機会が減ってしまう可能性が高まります。

Webデザイナだから■■ができないという否定的な発想ではなく、Webデザイナだから○○が得意。○○を生かすために■■も覚えるといった思考のほうがよろしいかと。

今回の開発環境を作った流れ

今回は相談いただいた案件ではテスト環境がないと聞いたので、まずはローカル(自分のPC)でまずテスト環境を作ることにしました。

WordPressなので、いただかないといけない下記2つが必要になります。

  • データベースのデータ(sql)
  • wp-content/以下のデータ(主にアップロード画像・プラグイン・テーマ)

データべース

データベースについては本番からエクスポートされたsqlをいただいてそれを後ほど作るデータベースの中に放り込みます。

/wp-content/以下のデータ

こちらはgitで管理されていたのでそれをcloneしました。
gitはbacklogで管理されていて、アカウントを作ってもらって自分で公開鍵を作ってそれを登録してからcloneしました。

開発環境

開発環境はWockerを使いました。
Wockerとは、仕組みはDockerと同じように、vagrantで起動した仮想環境上に複数のコンテナが設置されて、Wockerコマンドでそのコンテナを切り替えることができるものです。

Wockerはコマンドでsqlを取り込んでくれる便利コマンドがあったのでそれでsqlを取り込んで、cloneしたリポジトリを置いてやっとこさ開発環境が整いました。

テーマの変更

テーマの中身を見ると「package.json」と「gulpfile.js」があったのでgulpを使っているのが直感的にわかったので、npm installしてgulpを使えるようにしました。
gulpは複雑なタスクではなく、sassをコンパイルする程度のものでした。

難易度が高そうと感じたところ

以下が私がWebデザインだけしてる人にはハードルが高そうと思ったところになります。

SQLのインポート
まずsqlのインポートが難しそう。普段Webデザイナは触らないだろうし。
git
普段からgit使ってないとさっぱりわからなくてcloneとかまでたどり着けなさそう。
公開鍵/秘密鍵
自分でこの二つを作成して登録する事は普段Webデザイナはしなさそう。登録は合っても鍵は作ってもらってばかりの肌感があります。
gulp/node.js
普段からgulpを使っていない人からしたら、そもそもnode.jsを入れるところから始めないといけないし、そこからgulpも入れるとかとても長くハードルが高そう。
私も以前プログラマの方に「<package.json>があるからnpm installすればいいのわかるだろ。」とか言われて闇が深いと感じたものです。

問題点と課題

これらの学習コストは一人でやると非常に高いですが、私はこれらができるWebデザイナというは一つの強みと思っていますし、今後このような開発環境がもっと流行って、同じようにできるWebデザイナが増えてくると、今度はこれらができないのが弱みになってしまうと考えています。

持っている素晴らしいデザインのスキルがほんと小さな障害で発揮されないのは悲しい事です。

解決の糸口としては開発環境を設計した人がドキュメントを作る事かなと思っています。

正直1から100まで開発環境を設計した人が書くのはコストがかかりますし、負担がでかいのですが最初は簡単な手順を書くだけでも良いかと思います。
それからドキュメントは育てていけば良いかと思います。

理想としては、下記のようなものと考えています。
1. ドキュメントのベースを作る

2. ドキュメントを読んだ人がわかりにくかった(自分で調べた・個別で教えてもらった)部分を追記する

3. 詳しい人が問題がないかチェックして問題なければ本番?に反映・承認

4. 2に戻る

みたいな感じかなと思っています。
つまりはチーム力を高めあって行くことでWebデザイナのできない問題の緩和はできると思っています。
私もそうですが何度か教えていただければなんとかいずれ一人でできるようになります。(たぶん)

便利な開発環境はあったほうが良いと思いますが、開発環境の構築をできない人が増えれば、そもそも開発ができない(案件をお願いできる人の分母が減る)といった本末転倒になるので、デザイナ・プログラマお互いに歩み寄っていける環境が本当の意味での開発環境なのかなと感じてします。

最後に

コーディング規約とかもそうですが、作ったWebサイトはこれからは自分以外も触ること前提で作っていかないと人の手に渡った時点で大きなひずみが生まれてしまい、Webサイトを育てられなくなってしまうような状況を懸念してます。

私もまだまだ勉強中の身でして、チームとしてものを作っていくというのが自分の中でも大きな鍵となるなと思っています。
身近にこういった困り事を相談できる人がいるのも大事ですね。

私はぼっちなので中々相談出来ないので心優しい方はたまにで結構なので相談に乗ってください(*ゝω・*)

皆さん、新規のサイトを公開するとき、チェックってしてますか?

私もチェックはするのですが、なんだかんだで漏れがあったりでミスする事がよくあるのと、人にお願いするときどこをどうチェックしてもらえばいいか頼むのに結構苦労したのでチェックシートを作りました。
私仕様の規約で作成しているので、ここの内容がWEB業界の標準なんてことはありませんが、どなたかの参考になれば嬉しいです。
Continue reading “【チェックシート付】品質アップにつなげるWebサイト公開時のチェック項目”

一年位前に週1でブログを更新する会というものを作りました。
きっかけなどは下記に記載してありますので、気になる方はご覧ください。
これからのWeb屋としての自分について考えてみた

一年続けた感想としては良く一年続いたなーというのが実は本音です。
自分で作っておきながら半年くらいで半数以上が幽霊部員になると思ってました。
こういったコミュニティを作ると大概途中で空中分解する経験はどなたもあると思いますが幸いにも、自分なりに1年続けれたのはなぜか、というところを分析してみました。
Continue reading “コミュニティを一年継続できた感想”

2016年7月3日に、知人とfacebookを通じてIT系の読書会をしてきました。

やった内容は各々が積み本している本をこの機会にきちんと読んで紹介するというものです。
初めての試みでしたが、本の話やその人の考え方、これまでの生き方がわかって手頃に楽しめるイベントになりました。
Continue reading “積み本を消化して紹介する読書会をした”

先日プロジェクターを買いました。
EZAPOR HDP200 ミニプロジェクター Miracastワイヤレス接続 HD解像度1080×1920 Pico DLPリモコン付き ブラック

プロジェクタというと結構大きなものをイメージすると思いますが、私が購入したのは手の平サイズの大きさで十数人が集まるくらいの大きさで活用できるプロジェクターです。
Continue reading “手の平サイズのミニプロジェクターが超絶便利でプレゼン環境が捗った”

Evernoteが2016/6/28に料金体系を変えてきましたね。

ヘビーユーザーの方は結構驚かれたのでは無いでしょうか。
私は端末を跨いでメモアプリとして結構使っていたので、今回の料金体系の変更で使いにくくなってしまった部類です。

無料のプランでは端末2台までの使用しか出来ないので、実質私は今まで通りに使えなくなってしまいました。

Continue reading “Evernoteが料金体系が変わったので違うサービスを検討してみた”

第29回リクリセミナー「サイト更新ツールの最新事情!ツールを使い分けて制作者もクライアントもがっちり!

上記のセミナーに参加しました。
CMSが増え続ける中、同業種の方がどんなCMSをどのように活用しているかを聞ける貴重な場でした。
参加してみて、心に響いたことの殴り書きです。
Continue reading “第29回リクリセミナー「サイト更新ツールの最新事情!ツールを使い分けて制作者もクライアントもがっちり!」参加してみて”

最近色々なサイトを作る機会に恵まれました。
普段はUikitといった大型のCSSフレームワークを使うのですが、ふとした機会にミニマムなCSSフレームワークに出会い、一目惚れしましたのでご紹介します。
Continue reading “学習コストが低くて使いやすいCSSフレームワーク(Skeleton)”