はじめに
Web初心者の女性に特化したSHEdesignsの
2017/6/24、25の回に参加いたしました！
講師の福田えりさんは学生時代からDesignGirlsという
女子向けデザイン講座の代表をしていて、そちらにも参加したことがあるのですが
今回は新しく大人の女性向けに講座を始められたとのことで
2年ぶりにリピーターとして参加！
相変わらず期待を上回る素敵なWebデザイン講座だったので
備忘録の意図も込めて、大事なとこだけまとめておきたいと思います_φ(◎-◎ー)
1日目（Webとは〜Photoshop基礎〜LPラフ画作成）
Webサイト制作の流れ
参加者はWeb初心者の人たちが多いので、まずはWebサイト制作の流れを説明してくれます。
- プランニング
- ワイヤーフレーム設計
- デザイン制作
- コーディング
- サーバー公開
上記のうち1日目でやるのはデザイン制作まで。
＊ デザインを考える上で大切なこと
デザインには、ユーザーがインプットする情報の整理をお手伝いして、
与えたい情報を適切かつ迅速に伝える役割が求められると。
特にスマホの普及が進む昨今、次々とユーザーにインプットされる情報が増えている中で
いかに脳にストレスを与えず情報伝達できるかは鍵になるのですな。
ユーザーが目的を達成するための手段を導いてあげるのがデザイン！なるほど。
- デザインはセンスに依存しない
- ユーザーが必要としている情報に迷わずたどりつけるか？
- 1番アピールしたい情報が適切な位置にあるか？
- ファーストビューエリアに配置する内容が重要
- フォントの特性を理解してサイトに最適な字体を選択
- 同業種の既存サイトを分析する（マーケティングも大事！）
- 基本原則が大事（まとめる、そろえる、くりかえす、メリハリつける）
そのほか、色々な小技を紹介していただいたのですが書ききれない( ಠωಠ)うぅ
＊ 便利なChrome拡張機能
デザインする上で、イケてる拡張機能はこちら。
デザインに限らず、自分はWeb画面のコーディングの時にもよく使ってます。
詳しい使い方はそのうち別途紹介できれば…
| 拡張機能 | URL |
|---|---|
| 万能キャプチャ | Awesome Screenshot |
| クイックカラー解析 | ColorZilla |
| サイズ測定 | Page Ruler |
Photoshopを使いこなそう
フォトショの機能を全部使い出したらきりがないですが、
ここではすぐに実践で使える技術を凝縮して学びました。
初期設定とポイントをおさえれば、いい感じに加工とかできちゃうからアドビすぎょい。
＊ おすすめの初期設定
- 単位はpx（ピクセル）にしておく
- ガイド（定規）を表示しておく
- 自動設定で「レイヤー」が選択されるように
- 右に表示するタブには「レイヤー」「文字」「ヒストリー」を装備
＊ 基本操作のショートカットキー
すみません、自分がMacなのでMacキーボード用のショートカットです(ρД-)
| 操作 | ショートカットキー |
|---|---|
| 100%等倍表示 | Command+1 |
| 矩形ツール | U |
| テキストツール | T |
| 移動ツール | V |
| 自由変形 | Command+T |
＊ よく使われるイケてる加工
なんでもかんでもやり放題ではありますが、これ知っておくと
かっこいいヘッダー写真とかバナーとか作れちゃうよっていう技術がこれ。
- 画像を傷つけずにくりぬけるクリッピングマスク
- クイック選択ツールで背景を消して画像合成
- グラデーションオーバーレイを使って自然なフェードアウト
これらを使って、SHEdesignsのサイトと同じようなLPを作成することができました！
＊ その他
- レイヤーはまとまりでグループにする
- グループ名、レイヤー名は誰にでもわかりやすくつける
これはチーム開発をやる上で鉄則ですね。
2日目（コーディング〜公開方法）
ブラウザの国内シェアについて
デザインができたら、いざ実装。
そのとき、意識しなければならないのが各ブラウザでの見え方ですよというお話。
国内で利用されているブラウザは以下。まだ半数以上がIEらしい。（2017年6月時点）
- IE（全バージョン） 58%
- Chrome 17.5%
- FireFox 17.3%
- Safari 5.7%
- Opera 1.2%
※そういえばちょうど上司にブラウザのシェアなどを調べるのに便利なサイト教えてもらったのでメモ→https://www.netmarketshare.com/
HTMLとCSS
入門編ということで、HTMLとCSSってなんぞや？についても丁寧に講義してくれました。
- HTMLは情報を配置
- CSSは装飾
タグの説明なんかは他の記事でもたくさんtipsあるのでここでは詳しくは割愛。
＊ 覚えておくポイント
HTMLでデザインを実装していると、混乱しがちなのがブロック要素とインライン要素。
使うタグを間違えてるといくら頑張ってCSSつけても反映しないよ〜〜とか
無駄に悩むことになるので注意(o´･ω･o)σ
【ブロック要素】
p、div、ul、li、table など
【インライン要素】
a、img、span、br、strong など
この辺、バックエンドのエンジニアだったりすると普段触らないから意外と忘れがちですよね。
＊ 使用するエディタ
SHE-designsの講義ではSublimeTextを使用しました。
自分も普段から使っていて、とてもお気に入りのエディタです。
そのままでも十分素晴らしいですがプラグインもたくさんあるし、
自分好みにカスタマイズして使うのがおすすめ。記事もたくさん出てます。
サーバーに公開する手順
せっかくコーディングまでできるようになったのだから、公開しようじゃないか！
という人のために、一般的な公開手順も紹介してくれています。
- サーバーを借りる（lolipopとかさくらとか）
- FTPソフトでデータ一式をアップロード
- ドメインを設定
- ブラウザでURLを入力して接続！
最近だとWordPressとかWixとか簡単にホームページが作れるツールたくさんあるけども
一から作って一式アップロードも達成感あって◎
おまけ
SHEdesignsがすごいのは、2日間のみっちり講座で
Webがちんぷんかんの人でも楽しんで実践的な技術を身につけられるのはもちろん、
なんといっても、女性ならではのキラキラポイントが多くちりばめられているところ。
＊ おしゃれ会場
今回はLibの渋谷にあるオフィスで。
開放感もあって爽やかで何よりリラックスできる空間だったのがよかったです。
これまでもfreeeやローリエプレスなど、
話題のスタートアップや女性系ベンチャーのオフィスで開催されていて
新しいつながりを作りたい！っていう人にも嬉しい。
＊ スイーツタイム
ただお菓子が出るだけじゃない、このスイーツタイムも意識がめっちゃ高いです。
私が参加した回では健康志向な女性が注目するロースイーツを用意してくださり、
講義の合間にみんなでティータイム。
可愛くてフォトジェニックなスイーツなのがまた素晴らしいです。
＊ ヨガタイム
ヨガタイムがあるのも、普通のエンジニア勉強会ではありえないですよね。
丸2日間、慣れないPCとみっちりにらめっこしていると身体がばきばきになる人も…
そんな自分の体をほぐすことができる、メリットたっぷりなヨガ体操を
ちゃんとその道のプロが来て一緒に教えてくれるんです。すぎょい。
おわりに
なんだかステマみたいになってしまいましたが、そういうつもりじゃありません笑
ただ、Web業界の技術者ってまだまだ男性が多い中で、
こうして女性の第一歩を踏み出してもらう取り組みをしているのは素敵。
ちゃんとデザイン勉強したくなった人はSHEdesignsへ。
またtips投稿します( ๑❛ᴗ❛๑)۶
＊ お願い
間違えている情報やリンク切れがありましたらどうぞご指摘ください。