ブログ

投稿

活動終了のご報告

私たちスタンダードデザインユニットは、2020年6月末日をもって本ウェブサイトの更新を停止するとともに、チームとしての活動を終了いたします。サイトは2018年10月よりおよそ1年半にわたって運営して参りましたが、これまで続けることができたのはひとえに読者の皆さんの支持のおかげです。ありがとうございました。またどこかでお会いしましょう。

投稿

Component Driven Development for Static Deliverables: A Retrospective

In the last few years, Design Systems have become a very popular topic in the development and design community. Tools like Styleguidist and Storybook are now pretty commonly used on many projects to maintain and develop a set of common design artifacts that we can generally define as Components. As part of the broader Design System term, this process could be defined Component Driven Development.

投稿

静的なHTMLのためのコンポーネント駆動開発―その導入を振り返って

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

投稿

ハーモニック・モジュラー・スケールのためのSassライブラリとSketchプラグイン

このブログではこれまで「文字サイズの比率と調和」や「音楽、数学、タイポグラフィ」といった記事で、調和数列をもとにしたスケールから文字サイズを決定する手法を紹介してきました。私たちのチームではこのスケールを「ハーモニック・モジュラー・スケール」と呼び、実際に多くのプロジェクトで採用しています。

投稿

レイアウトプリミティブ

DIST.30 「一歩差がつくCSSテクニック」にてライトニングトークをさせていただく機会がありました。この記事はそこでお話しした内容をもとに書き起こしたものです。

投稿

音楽、数学、タイポグラフィ

先日開催された「フロントエンドカンファレンス福岡2019」で、「音楽、数学、タイポグラフィ」というプレゼンテーションをする機会をいただきました。ここにその内容を再構成して掲載します。

投稿

Webタイポグラフィの基礎知識と実践

「Webタイポグラフィの基礎知識と実践」は、ウェブタイポグラフィに関するキーワードについて、ウェブ標準技術による実践方法をまじえつつ解説したコンテンツです。フォントプラスのサービス改善プロジェクトの一環として企画されたもので、私（鈴木）が用語の選定と執筆を担当しています。今年1月の最初のリリース以降、全6回にわたって少しずつ項目を追加していき、この9月にいったん完成ということになりました。プロジェクトはウェブサイトの形ではなくGitHubのリポジトリとして公開されていて、内容についての提案も受け付けています。

投稿

Sassの新しいモジュールシステム

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

投稿

accrefs―ウェブアクセシビリティのリンク集

accrefsというサイトをご存知でしょうか。先日公開されたばかりの、ウェブアクセシビリティ関連リソースのリンク集です。サイトはA11YJというSlackチームのメンバーを中心とした有志によって運営されています。このプロジェクトにはスタンダードデザインユニットの安田祐平がコントリビューターのひとりとして参加していることもあり、ここで紹介したいと思います。

投稿

英語コンテンツを作るときに気をつけたいタイポグラフィのディテール

ウェブやソーシャルメディアなどで、日本語の原稿を英語に翻訳した（と思われる）コンテンツを目にする機会が増えています。しかしそういった英語のコンテンツの中には、欧文タイポグラフィの視点から見ると少しおかしく感じられるものも少なくありません。たとえば句読点や記号の使い方が間違っていたり、語句が不自然に強調されていたりといった具合です。このようなちょっとしたミスは、ひとつひとつは些細なことでも、結果としてコンテンツが正しく伝わらなかったり、書き手の信用を下げてしまったりする原因にもなります。

投稿

名刺を作りました

私たちチームの名刺を作りました。デザインしてくれたのはシフトブレインのアートディレクターのふたり、及川昇と藤吉匡。書体は秀英明朝とGaramondで、クレーンレトラという紙に活版で印刷しています。

投稿

リスト項目のマーカーのリセットと復元

リスト項目のマーカーを非表示にするには、CSSでlist-style-typeプロパティの値にnoneを指定します。このとき指定する要素がol・ul要素でもli要素でも、表示結果は同じになります。

投稿

文字サイズの比率と調和

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

投稿

オンスクリーン・タイポグラフィ・デイ2019

先週の日曜日に開催された、デジタル領域のタイポグラフィをテーマにしたセミナーイベント、「オンスクリーン・タイポグラフィ・デイ2019」。私たちシフトブレインは企業として後援しているほか、イベント当日も何人かのメンバーが参加させていただきました。

投稿

あらためて私たちについて

このウェブサイトの公開から半年以上がたちました。しかしそもそも私たちは何なのか、何をやっているのかといったことについてしっかりお伝えしてきませんでした。そこでこのたび、「私たちについて」というページを作りました。

更新

mix-blend-modeとスタックコンテキスト

CSSのmix-blend-modeを使うと、重なり合った要素同士の色の合成方法を設定できます。これによりPhotoshopなどのグラフィックツールにあるブレンド機能と同じような効果を実現できます。

投稿

レジビリティとリーダビリティ

優れたタイポグラフィはテキストを読みやすくし、その内容の理解を助けてくれます。では「読みやすさ」を実現するためにはどのような点に注意すべきでしょうか。

投稿

より良い相対日時表記についての考察

ニュース系ウェブサイトの記事リストやソーシャルメディアのフィードなどでは、各記事の公開日時を相対表記で表現することがあります。「5分前」「3時間前」「きのう」というように、記事の公開からどれだけ時間が経過しているかを表現する形式です。具体的には、JavaScriptで記事のタイムスタンプをユーザーの閲覧時の日時と比較し、相対表記に変換することになります。一方、「2018年10月1日」のような形式は絶対表記と呼ばれます。各記事の個別ページでは絶対表記が採用されることが多いようです。

更新

ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い

a要素のclickイベントをフックにして独自の振る舞いをさせたいという場面はよくあります。例えばスムーズにスクロールするページ内リンクや、シングルページアプリケーションにおけるリンクです。こういった独自の振る舞いを実装するには、JavaScript でclickイベントに対してevent.preventDefault()を実行してブラウザのデフォルトの振る舞いをキャンセルする必要があります。