WEBデザイナーがEC2を使ってサイトを作った話（準備編）

WEBデザイナーがEC2を使ってサイトを作った話（準備編）:

はじめに

一回のWebデザイナーが空き時間にEC2を使って、ドキュメントを読み漁りながら、手探りサイト（Whatever）を作ってみた話です。リリース直後から忙しくなり、2ヶ月余り放置していますが、記録として残しておきます。

サイトの仕様書

コンセプト

デザインや、ワイヤーを作成するときに使えるデザインを提供（無料）するサイト。気に入ったサンプルは、ダウンロードして使用・改変ができるようにする。

データの提供方法

• html/css形式（github）
• ソースファイルの公開（html/pug/css/scssの何れか）（github）

その他

サンプルデータの表示を画像で吐き出す方法が難しかったので、サンプルデータを囲っている親ブロックhoverでダウンロードボタンを表示させる。

管理方法

EC2にワードプレスをインストール、カスタムして運用する。

私用のプロジェクトなので、なるべく経費をかけず手軽にできるやり方を考えて選択しました。作成に際して、自分でできる範囲のツール（無理しない）で進めました。

開発環境・使用するソフト・言語

• 
  WEBデザイン
  
  
  • Brakcets（デザインのコード書きに使用）
  • Pug（分岐やループ処理ができるので重宝しています）
  • Scss（BEMが好きなので）
  • Gulp（PugとScssをコンパイルするだけなのでGulpで十分でした）
  • iTerm2（Gulpコンパイル用）

Webデザインを仕事にしていますが、PhotoshopやSketchなどのデザイン（写真等の加工は別にして）アプリケーションは、使わなくなりました。

デザイン後に、実際納品されるファイルはhtml/cssになるので、初めからhtml/cssベースで作った方が、イメージの相違を避けられるメリットがあると思っているからです。

• 
  Wordpress実装
  
  
  
  
  • Wordpress（ACFプロを使ってカスタマイズ）
  • MAMP（ローカル開発環境用）
  • Coda2（EC2接続用・ファイル管理）
• 
  その他
  
  
  
  
  • AWS（EC2・Route 53）
  • GitHub（素材データの提供用）

準備完了

仕様が固まったので、実際にデザイン・コーディングを始めていくことになります。

次回、作業編はまた合間を見て公開できればと思います。

ありがとうございました。