nlog

とめどなく流れるよだれ

2018 年のフロントエンド開発とWeb デザイン

2018 年のフロントエンド開発と Web デザインのトレンドについて把握しようとした。自分でもなんでこの時期にやってるか不思議だけど気になったからしょうがない。

トレンドを調べるのに参照した記事のリンクとキーワードを以下にまとめた。わかるものについては記事の更新日やイベントの開催日を載せてる。

Frontend

Design

朝早起きしてる

5:30 にアラームセットして 7:00 に起きる。

経験上早起きしようとしてもアラーム通りの時間に起きれることはほとんどない。それにアラームが鳴ってからグダグダする時間がほしい。だから適当に起きたい時間よりも前にアラームをセットしてる。

ただ、これだと起きるのが毎回 7:00 にはならない。8:30 だったり、6:00 だったり、ばらつきは出る。

でもそれでいいかなって思ってる。なかなか起きれないならそれは体が疲れてるんだろうし、早く起きるなら元気な証拠だ。

遅刻する時間に起きたことがないのだけが不思議。

「実践者から学ぶデザイン組織の作り方」のレポート

【増枠】実践者から学ぶデザイン組織の作り方 〜 初めの一歩を踏み出すために今日からできること 〜」に参加しました。

Twitterハッシュタグ#sdnight です。

Service Design Night とは

このイベントは Service Design Night vol.7 として開催されました。

Service Design Night とは事業成長の術としてデザインを実践的に活用できるデザイン組織デザイナー育成を目的としたコミュニティです。

デザイナーだけが対象ではなく、PM や PO、ベンチャー経営者の方なども対象になります。

今回のテーマ

実践者から学ぶデザイン組織のつくり方がテーマでした。
「デザイン組織をつくる最初の 1 歩目」にフォーカスして話されました。

登壇者発表

dely 大竹さん

ポイント:

  • 継続的なデザイン貢献が必要
  • デザイン負債(負債 = 一貫性の欠如)
  • デザイナーの役割はリファクタで負債を回収し、トレンドを抑えて設計すること
  • 課題発見からユーザーテストまでがデザインの領域
  • dely.design ブログで自分たちの仕事をおさらい、外に向けてブランディング

CrowdWorks 上田さん

ポイント:

  • リードデザイナーとマネージャーで役割を分けている
  • デザインの存在意義を理解してもらうために、
    • デザインの価値を数値で示す
    • デザイナー以外を巻き込んだプロセスにする
    • 社外から評価されるようになる

スタートトゥデイ田口さん

運営者からの質問に答える形で話されていました。

ポイント:

  • ZOZOTOWN 公式キャラは
  • 組織は結局、人
    • 社内デザイナーの 1 / 3 が社内公募できた人
    • 会社やプロダクトを持つ空気感やノリを見極めるために、採用課題を出して社内公募を出している
  • 組織全員で同じ方向を向くためには、組織や人を「好き」になってもらうことが大切

OPT 竹田さん

ポイント:

  • OPT では BTC モデルの内、これから C を足そうとしていて完成目指している
  • 今年「デザイン経営宣言」が経済産業省から発表された
  • 役員にデザインを直接理解してもらうために、一緒にデザイン勉強会に連れて行った
  • 場 → チーム → プロダクト
    • いいプロダクトをつくるために、まずはいい場が必要
  • Organization Canvas
    • KPI 公開中
  • デザイン経営宣言について話し合う場に経営者が 1 人もいなかった
    • デザイナーの皆さん、経営者と話していますか?経営者の皆さん、デザイナーと話していますか?

パネルディスカッション

たくさん話がありましたが、覚えてることだけ。

  • デザイン組織はトップダウンボトムアップ両方の視点を持ってつくるものですが、企業によってどちらに重点を置いてつくったかは異なるようでした。OPT ではトップダウンから、CrowdWorks はボトムアップに重点を置いてデザインの組織づくりを進めたようです
  • 「まずはやってみましょう!」で経営者やエンジニアをデザイン制作に巻き込む
  • いまデザイン組織を会社に根付かせているところはデザインの組織づくりを続けてきた企業。始めたことを途中で止めないことを心がけながら、どうしてもダメになったら目標は変えずに手段を変えましょう

感想

懇親会に最後までいたのは自分的にめずらしい。

あと、登壇者からの発表とパネスディスカッションの話しを聞いて、スタートトゥデイ田口さんの「組織は結局、人」というところに納得しました。相手を見るときは人として合いそうか、どれだけ会社やメンバーのことを好きになってくれているかをより重視したいと思いました。

Sketch でシンボルをつくるときの命名やレイヤーの扱い

Sketch でシンボルつくるときに迷うことが多いので、今のつくり方を少しづつ残していく活動。

シンボルの命名

ライブラリー名/コンポーネント名(ページ名)/コンポーネントの構成要素名 にしてる。

f:id:namikuguri:20180621230414p:plain

  • ライブラリー名はライブラリーが複数ある場合に使う
    • 例)mobile/list/item, web/list/item
  • Sketch のページ名がコンポーネント名になるようにする
    • f:id:namikuguri:20180621230822p:plain
  • コンポーネントに構成要素がない場合は、要素名の代わりにコンポーネント名をいれる
    • 例)button/button
  • hover や active など、状態変化や見た目のバリエーション系のシンボルは、BEM の Modifier のように -- を使って名前をつける
    • 例)button/button--hover, button/button--large
  • Modifier をつくりすぎない
    • f:id:namikuguri:20180621233105p:plain
  • コンポーネント名やシンボルのパーツは、そのまま CSS に置き換えられる名前をつける

シンボルのレイヤー

  • Override するレイヤー名はカテゴリーに分けて絵文字をつける
    • 🖊label, 🎨background, 💈border, 🔶icon
  • Override するレイヤー名はコンポーネントを見なくても内容がわかるようにする
    • Override するレイヤーは名前がかぶらないようにする
    • 例)input コンポーネントであれば、🖊text と 🖊placeholder にするなど
  • Override したくないレイヤーはロックする

(余談)シンボル作成に使うプラグイン

普段からよく使うプラグインばかりだけど、以下のプラグインはシンボル作成時にとくによく使う。最近 Paddy を使うようになった。

  • Runner ... シンボルの呼び出し
  • Smartboards ... アートボードの整列
  • Rename It ... アートボードやレイヤー名の一括置換
  • Paddy ... シンボルに余白( padding )をつける

Semaitic UI でサイトヘッダーをつくる

Semantic UI の Container、Menu 、Image 、Search 、Icon 、Button などを使ってサイトヘッダーをつくった。

f:id:namikuguri:20180529234531p:plain

本当はフィードみたいなものまでつくり切りたかったけど全然進まなかった。思いの外大変だ。

HTML はつぎのようになっている。Container と Menu でほとんどのレイアウトを決めて、あとはデザインに合わせて Button などのコンポーネントを使った。

<div class="ui fixed secondary menu pointing siteHeader">
  <div class="ui container">
    <div class="left menu">
      <a href="#" class="active item">
        <i class="icon home"></i>
        Home
      </a>
      ...
    </div>
    <a href="#" class="item">
      <img class="ui avatar image centered circular" src="logo.png" alt="">
    </a>
    <div class="right menu">
      <div class="item">
        <div class="ui search">
          <div class="ui icon input">
            <input class="prompt" type="text" placeholder="Search">
            <i class="search icon"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
      <a href="#" class="item">
        <img class="ui avatar image centered circular" src="avatar.png" alt=""><!-- no image -->
      </a>
      <a class="ui item">
        <button class="ui primary button circular">Follow</button>
      </a>
    </div>
  </div>
</div>

サイトヘッダー内の配置を整えるために上書き用のスタイルは少しだけ書いた。

.siteHeader {
  $itemSize: 54px;

  .item {
    height: $itemSize; // ロゴやアバター画像とサイズを合わせる
  }
}

感想。

  • Semantic UI のスタイルは継承やセレクタが頻繁に使われていて詳細度が高く、スタイルを上書きするのがつらい
  • .ui.xxx という Semantic UI の書式とは別にして、上書き用の命名ルールがあるとスタイルが管理しやすくなりそう( .siteXxxx みたいな)
  • Semantic UI のドキュメント見ながらスタイル書くのがしんどいけど、こういうもんか

CSS 関連の記事を眺めて

マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法

すべてのコンポーネントの周囲に padding を持たせて設計することを提案している。均等な余白が向いているのはアプリケーションかな。コンポーネントの周囲に padding を持たせることで、コンポーネントの組み合わせごとに余白の設計をしなくて済むようになるというのが利点に思えた。けど、背景画像やボーダーをコンポーネントに持たせたいときに要素がひとつ増えてネストが増えることや、本来 margin の役割となる部分に padding を使ってるのがそもそも気になるので、あんまりこの提案には乗り気になれないな。

Pure CSS watch animation

信じられませんけど。

Semantic UI Doc ( Modules - Sidebar, Sticky, Tab, Transition ) を読む

Semantic UI の SidebarStickyTabTransition を読んだ。

JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。

Sidebar

テーマはない。Sidebar はページのナビゲーションを見えないところに隠しておくのに使う。

.ui.sidebar で括られた要素はページの裏側に隠される。隠された要素はユーザーがボタンを押すなどアクションを起こしたときに表示される。

Sidebar の構造は Sidebar 自身(隠される要素)と Pusher (Sidebar を表示するアクション要素)の 2 つに分けられる。

見た目のバリエーションもあり、Sidebar を表示する場所をページの上下左右から選べる Direction と、Sidebar のサイズを指定する Width がある。

Sticky

テーマはない。Sticky はページをスクロールしたときに、途中で要素を固定して表示させたいときに使う。

.ui.sticky で指定した要素が上述したような Sticky の効果を得る。

Tab

テーマはない。Tab は Menu によってアクティブ化したコンテンツを表示するときに使う。

Tab は .ui.tab で指定する。メニューとコンテンツ部分は data-tab 属性でつなげる。

Tab はコンテンツが表示されたアクティブ状態と、コンテンツが表示される前の読み込み中の状態がある。

Transition

テーマはない。Transition はコンテンツを表示・非表示させるときに使う。

つぎのように jQuery で Transition の対象とアニメーションの内容を指定するみたい。

$('.autumn.leaf') // 対象
  .transition('scale') // アニメーションの内容
;

アニメーションの種類はたくさん用意されている。Transitions はコンテンツの表示・非表示をトグルし、Static Animations はコンテンツを表示したままアニメーションする。

  • Transitions
    • Scale
    • Zoom
    • Fade
    • Flip
    • Drop
    • Fly
    • Swing
    • Browse
    • Slide
  • Static Animations

また、Transition はアニメーションの種類だけでなく時間など細かい調整も可能。


Semantic UI のドキュメント読む旅がようやく終わった。途中からこれが CSS の記事なのか何なのかわからなくなったが、とにかく最後までやりきれてよかった。