SHE-designsでWebデザインの基礎を学んだのでおさらいまとめ

てか久々にブラウザからTwitter入ったらデザイン綺麗になってたけど丸アイコンやんけ!!
5分間無操作だと締め出される業務システムがあって、不便だからブラウザ操作を自動化して締め出しを防ぐスクリプトを書こうとしたけどフレームを多用した旧石器時代のページデザインだったので暗礁に乗り上げた
またなんか火狐が使いにくいデザインになってんだけど。ほんと改悪しかしないなこのブラウザ。
新しいターコイズな2DSLLくん。(頭にNewいるんだっけな) 画面は3DSLLと同じなのに凄くスリムでデザインもスタイリッシュ。 なんだかゲーム機と言うより、見開きのスマホみたいだ。 そして、最新型だけあってネットのブラウザとか表示早い。
Skypeとかブラウザとかもそうだけど、なんで無能デザインに変えるのかが謎
まただ。ブラウザのウィンドウのサイズが変わったらこのデザインは成立しないよねってっていうwebデザインの入稿データは大概がai。
PCデザインでブラウザの大きさに合わせて広告出てくることほとんどないのにスマホデザインになった途端これみよがしにブラウザに合わせて広告バンって出てくるのはちょっと…
無印良品の通販サイトのデザインがめっちゃ変わってて使いづらくて悲しい気持ちになりながらブラウザ閉じた。
ʕ•͠ω•ʔ Webでマテリアルデザイン使うの個人的にはひどくキモくて、おそらくブラウザ、もといデスクトップがそもそもマテリアル的 (ドロップシャドウとか重なりとか) だから、ページ内にもそういうのがドカドカ入ってきちゃうとデザイン言語の境界侵犯って感じがするんだよね
あれ? ブラウザ版Twitterまた更新されたのかな、、 デザイン変わっとる
デフォルトのテキストボックスとかボタンのデザインをブラウザに依存せずにまっさらにするcssを適用してるんだけど、なんか形が変わるだけでにゃーん
某所のブラウザ花札はゲームバランスおかしいよね( ˘ω˘) デザインは見やすくて最高なんだけど
ブラウザのデザインとかガラケーのメール画面とかいちいち懐かしい

はじめに

Web初心者の女性に特化したSHE-designs
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

* よく使われるイケてる加工

なんでもかんでもやり放題ではありますが、これ知っておくと
かっこいいヘッダー写真とかバナーとか作れちゃうよっていう技術がこれ。

  • 画像を傷つけずにくりぬけるクリッピングマスク
  • クイック選択ツールで背景を消して画像合成
  • グラデーションオーバーレイを使って自然なフェードアウト

これらを使って、SHE-designsのサイトと同じような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を使用しました。
自分も普段から使っていて、とてもお気に入りのエディタです。
そのままでも十分素晴らしいですがプラグインもたくさんあるし、
自分好みにカスタマイズして使うのがおすすめ。記事もたくさん出てます。

サーバーに公開する手順

せっかくコーディングまでできるようになったのだから、公開しようじゃないか!
という人のために、一般的な公開手順も紹介してくれています。

  1. サーバーを借りる(lolipopとかさくらとか)
  2. FTPソフトでデータ一式をアップロード
  3. ドメインを設定
  4. ブラウザでURLを入力して接続!

最近だとWordPressとかWixとか簡単にホームページが作れるツールたくさんあるけども
一から作って一式アップロードも達成感あって◎

おまけ

SHE-designsがすごいのは、2日間のみっちり講座で
Webがちんぷんかんの人でも楽しんで実践的な技術を身につけられるのはもちろん、
なんといっても、女性ならではのキラキラポイントが多くちりばめられているところ。

* おしゃれ会場

今回はLibの渋谷にあるオフィスで。
開放感もあって爽やかで何よりリラックスできる空間だったのがよかったです。
これまでもfreeeやローリエプレスなど、
話題のスタートアップや女性系ベンチャーのオフィスで開催されていて
新しいつながりを作りたい!っていう人にも嬉しい。

* スイーツタイム

ただお菓子が出るだけじゃない、このスイーツタイムも意識がめっちゃ高いです。
私が参加した回では健康志向な女性が注目するロースイーツを用意してくださり、
講義の合間にみんなでティータイム。
可愛くてフォトジェニックなスイーツなのがまた素晴らしいです。
IMG_1427.JPG

* ヨガタイム

ヨガタイムがあるのも、普通のエンジニア勉強会ではありえないですよね。
丸2日間、慣れないPCとみっちりにらめっこしていると身体がばきばきにになる人も…
そんな自分の体をほぐすことができる、メリットたっぷりなヨガ体操を
ちゃんとその道のプロが来て一緒に教えてくれるんです。すぎょい。

おわりに

なんだかステマみたいになってしまいましたが、そういうつもりじゃありません笑
ただ、Web業界の技術者ってまだまだ男性が多い中で、
こうして女性の第一歩を踏み出してもらう取り組みをしているのは素敵。

ちゃんとデザイン勉強したくなった人はSHE-designsへ。

サーバーサイドもやってみようという人は
eラーニングのStudySmileもどうぞ活用してくらさい。

またtips投稿します( ๑❛ᴗ❛๑)۶

* お願い

間違えている情報やリンク切れがありましたらどうぞご指摘ください。

[紹介元] CSSタグが付けられた新着投稿 – Qiita SHE-designsでWebデザインの基礎を学んだのでおさらいまとめ

  • コメント

    1. 匿名希望
      2017/08/18(金) 06:12:10

      またなんか火狐が使いにくいデザインになってんだけど。ほんと改悪しかしないなこのブラウザ。

    2. 匿名希望
      2017/08/18(金) 06:12:10

      新しいターコイズな2DSLLくん。(頭にNewいるんだっけな)
      画面は3DSLLと同じなのに凄くスリムでデザインもスタイリッシュ。
      なんだかゲーム機と言うより、見開きのスマホみたいだ。
      そして、最新型だけあってネットのブラウザとか表示早い。

    3. 匿名希望
      2017/08/18(金) 06:12:10

      まただ。ブラウザのウィンドウのサイズが変わったらこのデザインは成立しないよねってっていうwebデザインの入稿データは大概がai。

    4. 匿名希望
      2017/08/18(金) 06:12:10

      Skypeとかブラウザとかもそうだけど、なんで無能デザインに変えるのかが謎

    5. 匿名希望
      2017/08/18(金) 06:12:10

      PCデザインでブラウザの大きさに合わせて広告出てくることほとんどないのにスマホデザインになった途端これみよがしにブラウザに合わせて広告バンって出てくるのはちょっと…

    記事に戻る

関連記事