Adobeのデザインシステム、spectrumから学べるデザインの基礎 - bagelee（ベーグリー）
はじめに 新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay14です！ 昨日は「WebARの本質的な価値について考えてみる」のお話でした。 WebARの本質的価値を考えてみる 本記事ではAdobeのデザインシステム、spectrumから学べるデザインの基礎についてご紹介します。 今年の10月後半にAdobeのデザインシステム、Spectrumの公式サイトが発表され、話題を呼びました。 spectrumに関する記事はAdobeのブログでも発表されていますが、細かい内容を日本語で解説している記事がないため、今回は私が読んで使えると思った部分を抜粋しご紹介いたします。 注意点としては、今回の記事はあくまで私の解釈で書かせていただいております。 元のspectrumの内容を忠実に再現というよりかは、自分が読んで解釈した結果、こういうところで実践的に使えそうだと思った、というところ
margin, paddingなど、レスポンシブに対応したスペースをCSSで効率的に定義する方法 | コリス
Webページやスマホアプリのレイアウトに使用する、margin, paddingなどのスペースをCSSで効率的に定義する方法を紹介します。 em, remの相対的な単位を使い、calc()を効果的に活用し、拡張性やメンテナンス性にも優れたデザインシステムを構築できます。 Create your design system, part 4: Spacing by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数を使用して、スペースのシステムを設定する方法 すべてのコンポーネントにデフォルトのpaddingを設定する方法 marginのユーティリティ スペース値を追加する場合 固定のスペース値が必要な場合 スペースを定義したSCSSファイル はじめに 元々は、近日公開予定の「Web Comp
プログラマが知るべき97のこと
プログラマが知るべき97のこと大人気の書籍『プログラマが知るべき97のこと』のエッセイを無料で公開中！すべてのプログラマにおすすめの本がウェブで読めるようになりました。 エッセイ一覧分別のある行動関数型プログラミングを学ぶことの重要性ユーザが何をするかを観察する（あなたはユーザではない）コーディング規約を自動化する美はシンプルさに宿るリファクタリングの際に注意すべきこと共有は慎重にボーイスカウト・ルール他人よりまず自分を疑うツールの選択は慎重にドメインの言葉を使ったコードコードは設計であるコードレイアウトの重要性コードレビューコードの論理的検証コメントについてのコメントコードに書けないことのみをコメントにする学び続ける姿勢誰にとっての「利便性」かすばやくデプロイ、こまめにデプロイ技術的例外とビジネス例外を明確に区別する1万時間の訓練ドメイン特化言語変更を恐れない見られて恥ず
2017年後半に感動したビジネスモデルまとめ10個｜チャーリー
チャーリーです。 ビジネスモデルを図解するシリーズを息抜きにはじめました。ひとまず10個まで書いたので、noteにまとめておきます。 100の事例を図解した「ビジネスモデル2.0図鑑」という本を発売しています（本記事の事例ふくむ）。予約開始と同時にnoteで全文無料公開という試みをやっています。本記事に興味を持ったらそちらもどうぞ！ ビジネスモデル図解シリーズを始めるきっかけになったサービス、Lemonade。 AMPの記事にわかりやすく詳細が書かれてるので引用。 ソーシャルインシュランスにおいて重要になるのが、どのようにしてグループを組めば、グループ内での保険の請求額が、そのグループにプールされている金額を超えないかだ。 Lemonadeでは、サービスに加入する際に、自身が関心のある社会課題を選ぶ。社会課題の中には支援や病児支援などが存在する。その社会課題に基づいてグループ分けが行われ、
CSSのコーディング設計について考える事 – YATのBLOG
CSSの設計は人によって様々で、これが正解というものは無いのですが、何も考えずに作っていくと命名の重複で悩んだり、定義したクラスの使い回しがしづらかったりといった悩みが多くなってきます。これらを防ぐためには、CSSの設計を考えながらコーディングすることが大切です。 目次 CSSで大切なこと ドキュメントの作成 CSS構成について 様々な設計手段 SASS、SCSS コードリファクタリング 最後に CSSで大切なこと CSSで大切なことは CSS Architecture でPhilip Walton氏が述べているように 予測しやすいこと 再利用しやすいこと 保守しやすいこと 拡張しやすいこと で、これらはページが多くなれば多くなるほど重要度が高くなります。 予測しやすいということは、命名規則のルールにより、どのクラスがどういった挙動するかが掴みやすく、修正作業が必要な時にソースコードを追う
HTMLとCSSの極上テクニック！ヤフーの現役フロントエンドエンジニア陣が本気で解き明かすオススメの本
本書にはHTML、特にCSSに携わる人が学ぶべきものがたくさんあります。 最前線の現場でHTMLとCSSがどう書かれているのか、Sassは制作で実際にどのように取り入れているのか、Gulpの使い方やBEMをベースにした命名規則の策定など、CSSの設計や管理の仕方、考え方のプロセスや効率的に書く方法などが詳しく解説されています。 今の自分に、5年後の自分ために、絶対熟読しておきたいオススメの本を紹介します。 本書はヤフー株式会社の現役のフロントエンドエンジニア陣が惜しげもなく、実際に業務で使用されているHTML/CSSの記述ルールやテクニックをベースに、より多くの制作現場で利用できるよう解説されたものです。 大規模サイトはもちろん、小規模サイトやランディングページなど、一つのプロジェクトを制作する上でSassをつかった実践的なCSS設計について学ぶことができます。
デザインは「課題解決の設計」トレタのデザインプロセスに学ぶ、デザイナーの役割とは | SELECK
今回のソリューション：【GitHub、Trello、Sketch、Flinto・他】 〜「デザイナーがプロダクトマネジャー」という意識を大切にする、トレタのデザインプロセスの全貌を公開〜 事業開発において、デザイナーと、デザインそのものが成すべき役割とは何か。それぞれの企業が「デザイン」をどう捉えているかは、そのデザイン・開発プロセスを知ることで明らかになる。 飲食店向け予約・顧客台帳サービス「トレタ」を運営する、株式会社トレタ。同社では、デザイナーをプロダクトマネージャーのような立ち位置に置き、「課題解決の設計」が役割であると定義している。 デザイナーが要件定義の段階から仮説検証、フィードバックに関わることで、プロダクトをより良くすることを目指しているのだ。 デザイナー出身者がプロダクトマネージャーの役割を担うようになっていくのは、ひとつの自然な流れだと話す、同社でCCO（最高クリエイテ
ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
デザインパターンを読み解く
ポリモーフィズム（サブクラスによる切り替え、抽象化） ここに分類されるのは、オブジェクト指向の第３原則、ポリモーフィズムを使用したパターンです。ポリモーフィズムを使用すると、動的に使用するクラスを切り替えることができます。＜参照＞ 他に分類されているものでも、ポリモーフィズムが重要な位置を占めているものもありますが、ここではそれしか使われていないものを扱います。 ただデザインパターン全体を通して強調されているのは、インターフェースでプログラミングするということです。実装への依存をなくし、そうすることによって設計の骨組みを明らかにするのです。 Template 次のようなメソッドがあった場合に、処理Bのところを条件によって変えたい場合があるとします。 class Hogehoge { void doit() { ... 処理A ... ... 処理B ... ... 処理C ... } }
オブジェクト指向UX | POSTD
(注：2015/11/18、記事およびタイトルを一部修正いたしました。) CNN.com で働いていた2012年6月に、大統領選挙投票日の夜のユーザエクスペリエンス（以後UX）のデザインを任されました。私はそれからの6カ月間を投票日の夜のための仕事に専念しました。しかし、仕事が成功するかしないかは、選挙結果に関係はありませんでした。私が懸念していたのは、情報の見つけやすさやデータの見やすさ、canvasでのオブジェクトの変形、そして一体どのようにしたら、iPhoneでマウスオーバーのフライアウトが動作するのかでした。CNN.com史上初めてWebデザインをレスポンシブにすることにしたのです。さらに史上初めて私が、その デザイン を担当することになったのです。 大きな賭けでした。CNN.comにとって大統領選挙投票日の夜と言えば、スーパーボウル（プロアメリカンフットボールの優勝決定戦）の日曜
チームで扱う「CSS設計」 | MARU-MEMO
覚書です。Web CSS 2014年12月20日 ※この記事は「CSS Architecture Advent Calendar 2014」21日目にエントリーさせていただきました。 せっかくブログを作成したので何か書かせていただこうと思い、「よ～し、この機会にパパ勉強しちゃうぞ！」と張り切って登録したところインフルエンザで寝込んでしまい、あっという前に今日がやってきましたこんにちは。予防接種ってなんだったのかな…？ このカレンダーも今日で21日目なわけですが、「おお！これはいいな！私も参考にしよう！」というものから「うん…うん、うん！なんかすごいのはわかった！（訳：私レベルの人間には難しかった）」まで、興味深い記事が盛り沢山で本当に素晴らしい企画ですね！ ……という感想からもお分かりの通り、私は正直ここに参加して良いレベルの人間ではありませんが、まあ1日くらいは息抜き的な記事があってもい
構造的な CSS のための命名規則とルール（CSS Architecture Advent Calendar 2014：前編） - #tech
これは CSS Architecture Advent Calendar 2014 の20日目の記事です。 昨日は GeckoTang さんでした。 CSS のメンテナンスがどれだけ難しいか、 変更を加える事がどれだけ大変かという問題にぶつかったのは、 自分で作っている WEB サービスの機能拡張をしている時だった。 CSS 上に、ほとんど同じだが、微妙に値の異なるスタイルが溢れかえり、 日々、増え続けていくスタイルの定義に、歯止めをかけることができなかった。 私は、もうそれをコントロールすることができなくなっていた。 結局、そのときの HTML と CSS は、デザイン更新のタイミングで、すべて捨てることになった。 CSS は難しい。 CSS は、記述を冗長にしないようにするための言語機能、 スタイルの影響範囲をコントロールするための言語機能などが不足している為、 そこに一定のルール、思
CSSの設計 | 第1回 枠とモジュールで考える
CSSの設計 第1回 枠とモジュールで考える このシリーズでは、なるべくメンテナンスしやすい、可読性の高いCSSを設計する考え方を解説します。第1回目は、現状のCSSの問題点と、枠とモジュールで設計する考え方を紹介します。（監修：フロントエンド・エンジニア高津戸 壮） はじめに 初出 この文章は『CSS Nite LP, Disk 26「CSS Preprocessor Shootout」』で高津戸が行った講演「CSSの設計」を元に、テキストとして再構成しています。 CSSはとてもシンプル 今「CSSの設計」を改めて考えるのは、なぜでしょうか。CSSの基本はとてもシンプルです。例えば、次のようにHTMLにクラスを付け、そのクラスに対してのスタイル指定をCSSで行うだけです。 <div class="box"> hoge </div> .box { color: red; } HTMLの要素
確実に良くするUI/UX設計
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
CSS 設計の長い夢 - ペパボのフロントエンドスタンダード
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 スタイルシートの夢 (1) 予測しやすい (2) 再利用しやすい (3) 保守しやすい (4) 拡張しやすい 代表的な CSS 設計手法 既存プロジェクトの CSS に立ち向かう！ (0) 流れ (1) 既存の CSS ファイルを元に SCSS ファイルに変換する (2) イニシャライズ CSS や共通の箇所のスタイルを分離する (3) CSSLint を使って、修正しやすいところから整理していく (4) コンパイル (5) スタイルのスコープ（あ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
