Web designer tutorial - actindi/tutorial GitHub Wiki

ロードマップ

メイン

  • HTMLとCSSでサイトが作れる（webの基本で済）
  • Lokkaで管理画面があるサイトが作れる
  • SinatraでSassとHamlを使ってサイトが作れる
  • LokkaでSinatraでSassとHamlを使った管理画面があるサイトが作れる
  • Railsのアプリにデザインが入れられる

オプション

  • 名刺を作る
  • サーバを借りてみる
  • WordPressで管理画面があるサイトが作れる
  • TwitterBootStrapを使ってみる
  • Facebookページを作ってみる
  • デザイン修行

名刺作成（必要になったら）

今後、勉強会などで名刺を配る機会があるので、名刺を作っておく。 （既に自分の名刺を持ってる場合はエンジニアインターンの名刺を作る）

  • 名刺を作る準備
    • 作る前に名刺をGoogleで検索、名刺の見本を発注、図書館などで本を借りて名刺の研究をよくする
    • Illustlator使って作ったファイルで入稿できる印刷会社を検索し、予算、紙などを研究する
  • 名刺のルール
    • 自分はデザイナーだとわかる名刺にする
    • 名前を載せる
    • ブログのURL、Twitter、Facebook、Githubアカウントを載せる
    • Illustlatorを使って自分でデザインする
    • Illustlatorを使って入稿する
    • Illustlator使って作ったファイルで入稿できる印刷会社に発注する
  • ゴール
    • 発注し、自分がデザインした名刺を手に入れる
  • 提出課題
    • 名刺を渡す
  • 参考

サーバの契約

  • やったことある場合は飛ばしてOKです。

  • ゴール

    • さくらの500円サーバを契約する（一ヶ月のお試しがあるのでご安心ください）

デザイン便利リンク

（良さそうな記事やスライドやサイトがあったらここに貼ってください）

ブログのデザイン

自分で自分のブログをデザインしてみましょう。WordPressかLokkaなど

  • 全体のレイアウトをデザイン

    • header
    • メインコンテンツ
    • ナビゲーション
    • footer …など

  • 本文で使うタグを意識してデザイン

    • p
    • h1〜h4
    • a
    • blockquote
    • ol li
    • ul li
    • dl dt dd
    • table
    • pre

デザイン修行

やっぱり、経験を増やすのがスキルアップに一番の近道なので数をこなしましょう。 もしくは、ボランティアでもいいので誰かのサイトを作ってあげる。 今回の課題ではそれぞれトップページのみで構わない。

  • テーマの例

    • 大企業サイト
    • 店舗サイト
    • ベンチャー企業サイト
    • iPhoneアプリを宣伝するサイト
    • webアプリの管理画面

  • ポイント

    • デザインをする前にひたすらググって参考サイトを見つける
    • 日本以外の国のものも見る
    • ユーザーの気持ちになってデザインをする
    • 売上（成果）が上がるにはどうしたらいいかを考える
    • 時間をかけずにいいものを作る

  • ゴール

    • デザイン参考サイトの見つけ方を身につける（英語でのググりかたも身につける）
    • デザインのいいデザイナー、会社を見つける
    • 自分がデザインをするのにどれくらいの時間がかかるのかを知る（効率の上げ方を考えられるようになる）
    • 自分の苦手なジャンルを知る

  • 提出課題

    • 今回作ったデザインを紹介する自分のポートフォーリオを作る

Facebookページ作成に挑戦（やってみたかったら）

Rubyを使う準備

rbenv

RubyGems

  • ゴール
    • RubyGemsの仕組みを理解する。
  • 課題
    • sassのgemをインストールできる。アンインストールできる。
  • 参照
    • (Command Reference)[http://guides.rubygems.org/command-reference/]

Bundler

  • ゴール
    • Bundlerの仕組みを理解する。
  • 課題
    • Bundlerをインストールする
    • fjord-sandboxに必要なGemをインストールする

Heroku

  • ゴール
    • Paasとは何かを知る。
    • Herokuを使って公開する（Bundlerの課題のfjord-sandboxをデプロイする）。
  • やること
    • Herokuコマンドをインストールする
    • fjord-sandboxをHerokuにデプロイする
  • 提出課題
    • fjord-sandboxをHerokuにデプロイし、そのURLをフィヨルドインターンのみんなに教える

HamlとSassを使う

Sinatra-BootStrapでサイトを作ってみよう

  • ゴール
    • Sassを使ってみる
    • Hamlをつかってみる
  • 課題 *

Haml

  • ゴール * *
  • 課題 *

Sass

Compass

  • ゴール * *
  • 課題 *

CMSのテーマを作る

Lokkaのテーマを作る

  • ゴール * *
  • 課題 *

TwitterBootStrapを使ってLokkaのテーマを作る

  • ゴール * *
  • 参照 *

WordPressのテーマを作る

  • ゴール *
  • 課題 *

Railsにデザインを入れる

  • ゴール * *
  • 参照 *

デザインテロ

  • ゴール * *
  • 参照 *