静的なHTMLのためのコンポーネント駆動開発―その導入を振り返って - シフトブレイン／スタンダードデザインユニット

2020/01/23 20 users シフトブレイン HTML 導入

ここ数年で、「デザインシステム」はウェブ開発やデザインのコミュニティでとても人気の話題になりました。そして「コンポーネント」として定義される一連のデザイン成果物を開発・メンテナンスするために、StyleguidistやStorybookといったツールが多くのプロジェクトで一般的に使われています。このプロセスはデザイン... 続きを読む

レイアウトプリミティブ - シフトブレイン／スタンダードデザインユニット

2019/12/16 6 users シフトブレイン

DIST.30 「一歩差がつくCSSテクニック」にてライトニングトークをさせていただく機会がありました。この記事はそこでお話しした内容をもとに書き起こしたものです。 私が業務で携わるのはおもに、メディアサイトやコーポレートサイトのようなページ数がたくさんあるサイトの制作です。そのようなサイトでは特に、ページ... 続きを読む

音楽、数学、タイポグラフィ - シフトブレイン／スタンダードデザインユニット

2019/11/19 85 users タイポグラフィ プレゼンテーション シフトブレイン 数学 最初

先日開催された「フロントエンドカンファレンス福岡2019」で、「音楽、数学、タイポグラフィ」というプレゼンテーションをする機会をいただきました。ここにその内容を再構成して掲載します。 みなさんこんにちは。今日の僕の話のテーマは「タイポグラフィ」です。まず最初に、そもそもタイポグラフィとは何なのかという... 続きを読む

Sassの新しいモジュールシステム - シフトブレイン／スタンダードデザインユニット

2019/09/27 48 users Sass forward use シフトブレイン 実装

Sassに新しいモジュールシステムが導入されます。具体的には@useと@forwardという2つのルールが登場し、@importルールは将来的に廃止される予定です。現在、Sassのおもな実装としてDart SassとLibSassがありますが、まずDart Sassへの実装が進んでいて、今年10月に安定版がリリースされる予定です。この新しいモジュール... 続きを読む

レスポンシブデザインに見るデザインカンプと実装との溝 - シフトブレイン／スタンダードデザインユニット

2019/08/26 92 users デザインカンプ グリッドシステム レスポンシブデザイン 実装

デザインカンプを基に実装する難しさはあらゆる場面で語られます。私の場合は特にレスポンシブデザインに関する仕様の解釈に悩む場面が頻繁にあります。 その問題点はどこにあるのでしょうか。私の制作したツールの紹介を通して、グリッドシステムのあり方やレスポンシブデザインの意味などを考察しました。 デザインカ... 続きを読む

文字サイズの比率と調和 - シフトブレイン／スタンダードデザインユニット

2019/06/28 304 users ウェブページ 階層構造 コンポーネントごと お互い 組み合わせ

ウェブページのテキストはいくつかの文字サイズの組み合わせで出来ています。それぞれの文字サイズは情報の階層構造を表現するなどの役割を担いますが、同時にお互いが適切なバランスで調和しているべきです。そのため文字サイズはページやコンポーネントごとに場当たり的に決められるべきではありません。プロジェクト... 続きを読む

より良い相対日時表記についての考察 - シフトブレイン／スタンダードデザインユニット

2018/10/26 31 users シフトブレイン 考察

ニュース系ウェブサイトの記事リストやソーシャルメディアのフィードなどでは、各記事の公開日時を相対表記で表現することがあります。「5分前」「3時間前」「きのう」というように、記事の公開からどれだけ時間が経過しているかを表現する形式です。具体的には、JavaScriptで記事のタイムスタンプをユーザーの閲覧時の... 続きを読む

ページ内リンクの実装から考える、<a>要素のclickイベントとその振る舞い - シフトブレイン／スタンダードデザインユニット

2018/10/26 80 users シフトブレイン スムーズスクロール 実装 要素 MacOS

この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-beh... 続きを読む