Webで日報を書くサービスを使ってたらなんだかブログ書きたくなってきた。 また、いま興味のあるデザインシステムやアニメーションに関して知識が少なく、本やトレーニングでインプットする機会も多くなるだろうから、そういうのを記事にしていきたい。 この…

2018 年のフロントエンド開発と Web デザインのトレンドについて把握しようとした。自分でもなんでこの時期にやってるか不思議だけど気になったからしょうがない。 トレンドを調べるのに参照した記事のリンクとキーワードを以下にまとめた。わかるものについ…

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

「【増枠】実践者から学ぶデザイン組織の作り方 〜 初めの一歩を踏み出すために今日からできること 〜」に参加しました。 Twitter のハッシュタグは #sdnight です。 Service Design Night とは このイベントは Service Design Night vol.7 として開催されま…

Sketch でシンボルつくるときに迷うことが多いので、今のつくり方を少しづつ残していく活動。 シンボルの命名 ライブラリー名/コンポーネント名（ページ名）/コンポーネントの構成要素名 にしてる。 ライブラリー名はライブラリーが複数ある場合に使う 例）m…

Semantic UI の Container、Menu 、Image 、Search 、Icon 、Button などを使ってサイトヘッダーをつくった。 本当はフィードみたいなものまでつくり切りたかったけど全然進まなかった。思いの外大変だ。 HTML はつぎのようになっている。Container と Menu …

マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法 すべてのコンポーネントの周囲に padding を持たせて設計することを提案している。均等な余白が向いているのはアプリケーションかな。コンポーネントの周囲…

Semantic UI の Sidebar、Sticky、Tab、Transition を読んだ。 JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。 Sidebar テーマはない。Sidebar はページのナビゲーションを見えないところに隠してお…

Semantic UI の Progress、Rating、Search、Shape を読んだ。 JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。 Progress テーマは 4 つ。タスクの進行状況を伝えたいときに使う。 .ui.progress で指…

Semantic UI の Embed、Modal、Nag、Popup を読んだ。 JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。 Embed テーマはない。Embed は YouTube や Google Maps のような外部コンテンツをサイトんい貼…

Semantic UI の Accordion、Checkbox、Dimmer、Dropdown を読んだ。 JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。 Accordion テーマは 2 つ。Accordion は開閉コンテンツを表示するのに使う。 .ui…

Semantic UI の Card、Comment、Feed、Item、Statistic を読んだ。 Card テーマは 4 つ。Card は画像やテキストをひとまとまりの構造として見せたいときに使う。 Card 単体は .card で指定し、複数の Card を並べるときは .ui.cards でグループ化する。Flexb…

Semantic UI の Advertisement を読んだ。広告（Advertisement）にテーマはない。 この Semantic UI の View は広告を表示するときに使う。たとえば AdSense 広告などに対応しているようだ。 CSS のスタイルはというとこんなふうになっており、ほとんど枠の…

Semantic UI の Table を読んだ。テーブルにテーマは 4 個ある。 テーブルは基本的に項目とそれに紐づくデータの集合であり、情報を構造的に見せたいときに使う。Semantic UI のテーブルは、モバイルサイズになると自動的にコンテンツが縦に並ぶように設計さ…

ぼんやりしてる今日この頃。夏の生ぬるい風を感じながら「へー、うふふ」と思った CSS の記事をまとめる。 【増枠】Meguro.css #1 @ oRo 目黒で夜な夜な CSS 話がおこなわれているらしい。CSS in ERB in JS とかやってる人がいたっぽい。勉強会に興味がある…

ウェブ開発を爆速に！人気オススメCSSフレームワーク厳選38個まとめ【2018年最新版】 38 個もあったのか。Propeller はかわいい見た目してるし、サードパーティ製のものも含めたらコンポーネントの数も豊富。Material Design Lite は本家 Google が開発元で…

Semantic UI の Message を読んだ。メッセージにテーマは 3 個ある。 メッセージはタイトルと文章が枠で囲まれた見た目をしていて、近くのコンテンツを説明するのに使う。 いくつかコンテンツのタイプがあり、タイトルと文章の通常メッセージに以下を追加・…

Semantic UI の Menu を読んだ。メニューにテーマは 4 個ある。 Flexbox を使ったナビゲーションの集合コンポーネント。 ナビゲーションの見た目はいくつか変更でき、タブのような見た目、グローバルナビゲーションような見た目 、サイドナビゲーションのよ…

「デザインシステムを学ぶ 31 日」の 3 日目。今回はデザインシステムの前準備、デザイン原則について。 なぜデザイン原則は必要？ チームでデザインの善し悪しを判断するためにデザイン原則は必要だ。同じチーム内でもいろんな考え方を持つ人がいる中、原則…

Semantic UI の Grid を読んだ。グリッドにテーマはない。 グリッドはサイトのレイアウトを格子状に整理して並べるのに利用する。CSS の技術としては Flexbox を使っており、グリッドのセル同士の余白は padding を利用して空けている。また、セルの持つ余白…

昨日に続いて 「デザインシステムを学ぶ 31 日」の 2 日目。 デザインシステムとは ブランドやプロダクトの一貫性を保つため、デザインをシステム化したもの。UI ライブラリー、フレームワーク、スタイルガイド、文章ガイドライン、ワークフローなどはこのシ…

ワンランク上のコーダーは万が一の配慮も欠かさない、リンク切れの画像要素をスタイルするテクニック - コリス つい最近考えることがあった。パスの入力ミスや影響範囲の確認漏れはないほうが良いけど、絶対ないとは言い切れない。そういったときにリンク切…

「デザインシステムを学ぶ 31 日」の 1 日目。 1人design system advent calender を見てやる気が湧いたから、「デザインシステムを学ぶ 31 日」という連載をやる。記事は毎日 17:00 毎日 17:00 以降に投稿予定。 個人・チームともにデザインシステムの必要…

Semantic UI の Form を読んだ。フォーム にテーマは 4 個ある。 フォームは項目と入力フィールドのセットを構造化して見せるのに役立つ コンテンツには項目と入力フィールドをセットで表示する Field と、Field のグループを表示する Fields 、そして各入力…

Breadcrumb Semantic UI の Breadcrumb を読んだ。パンくずリストにテーマはない。 .ui.breadcrumb でパンくずリストを表示できる。リストアイテムの区切り記号はスラッシュだが、アイコンフォントなどで別の記号に変更することもできる。 リストアイテムは…

https://www.concentinc.jp/design_research/2014/01/pixel-perfect-precision-handbook-2-japanese/ ドキュメントが PDF というのが気に食わなかったけど、簡潔にまとめられた文章と説明のためにつけられたグラフィックは読みやすかった。 自分がなるほどな…

めでたいことがあって一人店に入ってお酒を楽しんでる。飲み放題でガブガブと。 お酒の失敗がこの頃多かったから控えてたけど、やっぱり人生にお酒は必要だ。 複数人いるノリで最初に料理をいっぱい頼んじゃったけど順番に頼めばよかった。冷めちゃうんだね…

Semantic UI の Step を読んだ。ステップにテーマは 3 個ある。 ステップは一連の行動の中で、自分が今どのポイントにいるかを示す。基本的にグループで使うことを想定してつくられている。 <div class="ui steps"> <div class="step"> ... </div> <div class="active step"> ... </div> <div class="disabled step"> ... </div> </div> .ui.ordered.steps で順序付きリストにする…

Semantic UI の Segment を読んだ。セグメントにテーマは 2 個ある。 セグメントは関連コンテンツのグループをつくるのに使う。いくつかタイプがあり、「Raised」はページの上に浮遊しているような表示に、「Stacked」は複数のページが重なったような表示に…

Rail Semantic UI の Rail を読んだ。レールにテーマはない。 レールはサイトのメインコンテンツに付随するオプションコンテンツを表示するのに使う。たとえば、ブログ記事がメインコンテンツで、前後の記事に移動するリンクがオプションコンテンツだ。 レー…