「Webデザイン・Web制作に関する勉強会 #4」のレポート
2019/02/19(火)に、関西フロントエンドUG ( @frontkansai )が主催する「Webデザイン・Web制作に関する勉強会 #4」に参加してきました。
会場は、株式会社タンバリンさん大阪オフィス (https://www.tam-bourine.co.jp/) の1F。
初めてお邪魔しましたが、カフェスペースのようなオシャレな空間でした。
参加者は15人ほどでしたでしょうか。スペースはほぼ満席状態でした。
19:30から21:30の2時間の間、4つのプレゼンと5つのLTがありました。
内容もWebデザインにおけるノウハウ、フロントエンド開発時に利用するlinterの話、そして、Web制作時に気をつけておきたい法律の話など、盛りだくさんな内容でした。
概要と、自分が得た学びについて、以下にまとめました。
Twitterのハッシュタグや、イベントページにスライドがシェアされているものに関してはリンクさせていただきます。(お名前は資料記載をベースにさせていただきました)
※記載間違いなどございましたら、 @aktuehr までご連絡ください。
プレゼン
P01. Buttonについての話(riri_mohuさん)
ボタンのUIデザインについてのお話。
ボタンを作る上で意識する3つの事として以下の3つが挙げられていました。
- ボタンということが一目でわかる
- ボタンの役割が認識できる
- 役割が同じボタンはデザインを統一する
その上で、ボタンの色についても、色そのものが与える印象を考慮したボタンデザインが必要という事がわかりました。
つい先日、Bootstrapを久しぶりに触る機会があったのですが、ボタンのclassにこういった色毎に役割が分けられているのを思い出しました。
(https://getbootstrap.com/docs/4.0/components/buttons/)
あと、ボタン内のテキストについては、意識が抜けがちだなと思わされました。「ここをクリック」とか何が起きるねん。っていう。あと、長すぎるのも少し考えものだなと思いました。
質問では、「画像」のボタンを最近見なくなりましたね、という話題がありました。
P02. Linter と Formatter( @chalkygames123さん )
エラーや潜在的なバグを警告する Linter と、 スペースやインデント、改行等のコーディングスタイルを統一する Formatter のお話。
実際に運用する際に困りそうな点を細かく解説されていました。
ある/なしだと、細かい点を気にせずコーディングできるので、入れる癖をつけておきたいです。
自身は職場において、複数人でフロントエンドを開発するのがここ2〜3年くらいになるのですが、当初はLinterやFormatterを利用しておらず、レビューでインデントの深さとかを [may] とかでコメントしたりしていました。その後、徐々に皆で共通課題として認識してきたタイミングで導入することになりましたが、この場合だと、それまでの差分がずらーーーっと出てきて確認が大変なので、導入時できれば初めから入れておくとベストだなと思っています。
質問では、エディターで公式のプラグインを入れておくと、configファイルを参照してくれるので、便利！というお話がありました。（知らずに使ってたので、そうだったんだ！と思ってました・・・）
P03. Web制作者が知っておくべき特定商取引法(あかまつさん)
「通信販売」を扱うサイトでは特に気をつけておきたいポイントをいくつか紹介いただきました。
- 名前と住所と電話番号は必ず表示する
- 販売価格・送料についてきちんと明記する（「送料実費」はNG）
- 負担すべき金銭があるときは、その内容および、その額を明記（キャンセル料など）
- 返品特約の明記（「お客様都合による返品はできません」）
事業者側がチェックするような、このような知識を持っていると、画面デザインを行う上で、
「この画面が必要ですよね」とか、「こういった文言を表示するスペースが必要ですよね」
といった会話ができるので、建設的に画面デザインを進める事ができると思いました。
完全に全てを把握できてはいないですが、観点として持てるようにしたいです。
P04. Webデザインを作る時に考慮するべき事( @cotolier_risa さん)
「Webサイトは、閲覧される環境は多様で、閲覧するコンテンツもユーザーの操作によって変わっていく」という中で、その変化に対応しうるために考慮する点を挙げられていました。
- コンテナーの仕組みを理解しておく
- デバイスサイズ毎のコンテナーを考える
- ブレイクポイントを考える
- ユーザーの操作を想定する
- テキスト量は変化する前提で考える
- カラムやカードは数の変化に注意する ...など
これらを
「制作の関係者と一緒に」、「優先度、対応範囲を絞って決める」事が重要という事でした。
これは、まさにそうだなとウンウン(多分)頷いていたのですが、
自分が携わっているプロジェクトでは、デザイナーさんが関係者ととてもコミュニケーションを取られていて、それが非常に建設的にプロセスを進められているなという印象があります。
コミュニケーション大事。
LT
LT01. Amplify Consoleでかんたん！Webサイト公開( @coppieee さん)
www.slideshare.net
新しく静的Webサイトを作るとき・公開するときは、AWS Amplify Consoleがおすすめ！というお話。
AWS上で設定をするだけで、gitに対応して、ビルド・デプロイをしてくれて、
デフォルトでhttps対応しているのが嬉しいですね。
開発者はgit pushするだけで自動的にサイトをアップデートできるので開発に専念できるのが素敵です。
また、gitのブランチで環境を分ける事ができるというのが、とても便利だなと思いました。
LT02. グラフィックデザインとWEBデザインの3つの違い(有柚さん)
グラフィックデザイン出身ということで、Webデザインを実際にされて感じられた違いを紹介されていました。
印象深かったのは、グラフィックデザインは「見てもらえない前提」で作る事があるということ。
確かに広告であれば(Webでもそうですが)目には触れているが「見ていない」ですね。
Webサイトは、そこを訪問している時点で(変な飛ばされ方をしていない限り)、ある程度興味を持って見ている可能性が高いので、なるほど〜と思いました。
LT03. スプレッドシートで簡易CMSをつくる( @fujimioさん )
資料：https://www.dropbox.com/s/dcl6fkdpbs94z94/190226_LT.pdf?dl=0
Googleスプレッドシート上のデータを参照するための仕組みをGoogle Apps Script(GAS)で作ってみたというお話。
実は今、こういった手法を探していたので、自分にドンピシャな内容でした。
GASは触ってみようと思ってまだ触れてなかったので、まずは同じような仕組みを自分で作ってみようと思います。
LT04. 美しきWaterfall Viewの世界(石田さん)
いわゆるNetworkでどういったリソースをどのくらいの時間をかけてリクエスト→ダウンロード→表示しているかといった、グラフについてのお話。
ユーザビリティ・UXといった部分に影響があるので、早い方がよいですね。
dev.toの紹介から始まり、重たいページ、応答しないページ、最後には人類最速の男（？）阿部寛のページが紹介されていました。
今回一番勢いのあるLTでした。
LT05. Notionについて(上平さん)
Notionというワークスペースツールの紹介。
ドキュメント、スプレッドシート、カレンダー、タスク管理ツールをまとめたもので、
全ての情報を一元管理できるというのと、Web/ネイティブアプリ/デスクトップアプリと環境も充実しているのが魅力。
管理系のツールは散らばっていたり、新しいのが出るたびにかいつまんだりして、
とっちらかっていることが多いので、まずは個人的に使ってみたいです。
（最近会社の方はリプレイスされたばかりなので、導入見込みはないかなー・・・）
以上が、レポートになります。
スピーカーのみなさま、ありがとうございました。
様々なお話を聞けて刺激になったので、また次の機会に参加したいなと思います。
