ブログ

デザインシステムの舞台裏 inVISIONのオンラインセミナー

前回の記事ではデザインシステム構築に関する書籍をご紹介しました。今回は先週金曜日11月10日、Invisionの執行役員であるアーロン・ウォルター氏が中心となって、デザインシステム構築のトップランナー3人を迎えて行われた約1時間のオンラインディスカッションについてです。少し経てば、ビデオやまとめなどが公開されるかもしれませんが、一足お先にリアルタイムで視聴しました。(時差の関係で朝4:00AM!)

内容は大きく2つです。デザインシステムがいかにクリエィティブなビジネスにおいて価値を生み出し続けるのか。また3人が世界最高峰のプロダクトのデザインシステムを生み出す中で何を学んだのかです。

そこで話されているのはグローバルテック企業のデザインシステム構築の裏側です。日本ではまだデザインシステムというもの自体まだ中々事例がないように思います。この記事ではそのセミナー前半部分に関してのまとめを書いてみます。

続きを読む “デザインシステムの舞台裏 inVISIONのオンラインセミナー”

“Design Systems” デザインシステムの構築と改善サイクルへのアプローチ

UX・インタラクションデザイナーとして無料EラーニングサイトFutureLearnのリードデザイ ナーを務めたアラ・コールマトヴァ氏(Alla Kholmatova)による書籍Design Systems が Smashing Magazineからプレリリースされました。

本書はデジタルプロダクトのためのデザインガイドラインやスタイルガイドなどを「デザイン システム」と総称し、価値のあるデザインシステムのあり方、その合理的な構築プロセスと改 善サイクルについて言及。対象は彼女自身がそうであった様に、中小規模のデジタルプロダク ト開発チームでUXを実践しているデザイナーやフロントエンドエンジニア。特にビギナーから 中級者くらいまでのようです。

またデザインシステムを実際に構築し運用しているAirBnB, Atlassian, Eurostar, Sipgate, TEDといった、そうそうたる有名サービスの開発チームへのインタビューを元にしていることも見逃せません。

これは私個人的にかなりタイムリーな話題であったので早速購入し2/3ほどザッと読み終えまし た。そのうち和訳本が出るかもしれませんが、待ちきれず。少しだけご紹介をしたいと思います。

※なお下記は公式な翻訳ではありません。私なりの理解をまとめたものなので、ご了承くたさい。

続きを読む ““Design Systems” デザインシステムの構築と改善サイクルへのアプローチ”

デザインに必要な単位の知識

デザイナーはどの分野であろうと単位を知らずにいることはできません。ここでは私が最低限抑えておくべきだと考える単位をまとめました。独学されている方や、基礎知識があいまいな方のご参考になれば幸いです。

なお、デザイナー事務所、制作会社によって考え方・やり方が異なっていたりするかもしれませんので、そのあたりはご了承を。

続きを読む “デザインに必要な単位の知識”

Basic Calendarのリファクタリング

以前CodePen上に作ったカレンダーUIのサンプル。HTMLとJSをリファクタリングしてみました。

HTMLはPugと呼ばれるテンプレートエンジンです。改行やスペースで入れ子を表現するので、完結にかけます。Emmetより早いですね。

JSはオブジェクト設計に置き換えてみました。Leihauoliさんのブログ記事で勉強しました。やっている間にVue.jsとかは最初からこういう構成になっているなぁと思いながら進めていました。確かに見通しがとてもよくなりますね。

See the Pen Basic Calendar (Refactored) by Hilo (@hilotacker) on CodePen.

ブレークポイントのまとめ

レスポンシブデザインを成功させるにはブレークポイントへの理解が欠かせません。それはウェブでもネイティブアプリ(特にAndroid)でも同じであると思います。

日々変化する環境ですし、ケースバイケースで設定は異なると思うので、完璧はありませんが、ここではプロジェクトに合わせて的確なブレークポイントを設定できるように

  • Android Material Design Guideline
  • Bootstrap
  • ZURB Foundation
  • 以前の私のポートフォリオサイト

のブレークポイントをまとめてみました。

続きを読む “ブレークポイントのまとめ”

私のTrelloの使い方

TODO管理やプロジェクト管理にTrelloを使っています。直感的な操作、俯瞰してタスクを眺められるところ、マルチデバイスでの一貫したUXが気に入っています。こういうアプリのUIに関わってみたいものです。

ただ悩ましい点もあります。例えば

続きを読む “私のTrelloの使い方”

PHPサイト開発のテンプレート2017

20ページくらいまでのサイト開発の際に、私が使用しているテンプレートです。

PHP ウェブサイト開発テンプレートGithubページへ

特徴

  • デザイナー向け(自分)
  • Devtips Starter kitがベース
  • Htmlは共通部分をphpで分割
  • CSSはSCSSを利用
  • タスクランナーはGulp

続きを読む “PHPサイト開発のテンプレート2017”