ウェブサイトのフォントは何を指定すればよいのでしょうか？　CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,

「もっと話上手になれたらいいのに」と思っている人は多いのではないでしょうか。 普通のビジネスパーソンは、アナウンサーのような卓越した話術を身に付ける必要はありません。しかし、話上手になることができれば、交渉が得意になり、営業も人事評価も転職活動も有利に進められるようになります。仕事におけるメリットは計り知れません。 私たちの会社でも、特に顧客と直接対話する機会が多いディレクターやデザイナーには、業務知識だけではなく、顧客との話し方についてもなるべくフィードバックしています。会話のクオリティは、サービスの品質や満足度に深く関わると思うからです。 最近は、会話ではなく、メールやチャットで済む機会も増えています。一方で、話上手な人はテキスト・コミュニケーションも大抵上手な印象があります。話術の中には、コミュニケーションに共通する普遍的ななにかが含まれているのでしょう。 こんな記事を書いてはいます

はじめに HTML+CSSコーディング専用の粒度分類を紹介します。 この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。 世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト…　といった様々な種別のサイト、Webページがありますが、これらの「完成予想図（視覚情報）」を同じ方法で分解して、コーディング用の部品にできます。 粒度と言えばAtomic Designが有名ですが、この「HTML Parts」も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で「思考の入り方・捉え方」や「名称と定義」をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし

こんにちは、コカコーラ大好きカジです。 はじめに AWSを全く知らない状態で入社して5年が経過、中途採用のAWSエンジニアの育成リーダーを1年間担当しています。 どのように勉強したのかを聞かれる機会が増えました。（優秀な人ばかりなので、すぐ一人前になって行きますが...） 今更ながら、自分がAWSに関するスキルアップために実践したことについてまとめてみました。 どなたかのお役に立てれれば光栄です。 目次 実際に触ってみるためにAWSアカウントを用意して試す AWS Black Belt Online Seminar シリーズを見て学習する 一度は読むべきブログ（私個人の選定） JAWS-UGの勉強会に参加する AWSのRSSフィードを見る SNSの利用してみる AWS資格勉強する 必要に応じてインフラスキルの底上げする 試したらブログでアウトプット まとめ 実際に触ってみるためにAWSアカ

品質を犠牲にすることでソフトウェア開発のスピードは上がるのか？ 和田卓人氏による 「質とスピード」（前編）。デブサミ2020 ソフトウェア開発のプロジェクトにおいて、リリースに間に合わせるために開発スピードを優先させ、ひとまず質には目をつぶろう、という判断がしばしば行われることがあります。 はたしてその判断は正しいのでしょうか。2020年2月13日と14日の2日間、都内で行われたイベント「Developers Summit 2020」（デブサミ2020）」の和田卓人氏のセッション「質とスピード」は、これを深く考察したものでした。 この記事では、会場に立ち見がでるほど大人気だった本セッションの内容をダイジェストで紹介します。本記事は前編と後編に分かれています。いまお読みの記事は前編です。

はじめに 最近、AWSのシステム構成図を見ることが多くなり、AWS上で動いているシステムのシステム構成図を理解できるようになるために個人的に知っておきたいと思ったAWSの用語・サービスをまとめてみました。 私自身も勉強がてら作成したので、わかりづらい部分も多くあると思いますが、AWSのサービス全くわからん→なんとなく雰囲気把握した、となっていただけたらと思います。 2018年10月に新しくなったAWSアーキテクチャアイコンを使用しています。 サーバ・クライアントなどの説明についてはここではしていませんが、以下の記事でとてもわかりやすくまとめてくださっています！ 超絶初心者のためのサーバとクライアントの話 知っておきたい用語 リージョン AWSがサービスを提供している拠点（国と地域） リージョン同士はそれぞれ地理的に離れている（例えば日本とオレゴンとか） 日本はap-northeast-1（

[レベル: 上級] loading=lazy 属性で実装するネイティブ Lazyload がウェブ標準になりました。 Chrome 以外のブラウザのサポートが期待されます。 The lazy loading attribute (<img loading="lazy") is now officially a web standard 🎉 Thanks to @domfarolino and other community members!https://t.co/fMqFq8gBVs pic.twitter.com/fFotntnBlD — Houssein Djirdeh (@hdjirdeh) February 12, 2020 The specification for native image lazy-loading has been merged into the HTML

突然ですが、「UI Stack」ってご存知ですか？ アメリカのプロダクトデザイナー Scott Hurff さんが3年ほど前に世に出した考え方で、考慮すべき UI の5つの側面を示したものです。 当時「これは使える！」と思って社内向けに作った勉強会資料を見つけて、今でもやっぱりすごく大事だと思ったので、備忘録的に書いておきます。 ちなみに元記事はこちら。（英語です） UI Stack とは？Stackとは、1つの画面が持つ（複数の）側面、状態、ステータスのようなもの。その側面ごとに最適化されたUIを設計しようするのが UI Stack の考えです。 Scottさんが紹介しているUI Stackは5つ。 ※図はScottさんのページから引用 ・Blank State（空っぽの状態） ・Loading State（ローディング状態） ・Partial State（部分達成状態） ・Error

こちらは2019年度版のレポートです。ReDesigner Design Data Bookは、デザインの価値がどのように変化しているのかを定点観測するために100社にデザイナーキャリアやデザイン投資に関するアンケートを行ったレポートになります。

利用者が一定数いるIE6,7,8を除いて、現在利用されているほぼ全てのブラウザで標準仕様として扱えるようになっています。2006年ごろから登場したjQueryの$(document).readyは有名ですが、この存在もDOMContentLoadedが正式に取り入れられるきっかけの1つになっています。 2. jQueryのreadyとの違い HTML5で定義されているDOMContentLoadedとjQueryの$(document).readyは、DOMツリーの構築が完了したことを判定するという点で役割は一緒といえます。ただ、jQueryは古いバージョンのブラウザをサポートするためにDOMContentLoadedを使わないready判定の実装を行っていました。 1. jQuery Core 1.0のready判定（1.0から1.2.1まで） jQyer Core 1.0を見るとIE/

HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he

はじめに FLOCSSというCSS設計手法で実装をやっていく上で、唯一の悩みどころにcomponentとprojectの判別があります。私のチームでも悩み、チームメンバーがモヤモヤし、あとあとCSSも崩壊しそうだったので、一つの判別基準をつくることにしました。 FLOCSS とは 数あるCSS設計手法のひとつで、OOCSSやSMACSS、BEM、SuitCSSなどのメジャーな設計手法のいいとこどりをした国産の設計手法です。 https://github.com/hiloki/flocss CSSはデザイン通りの見た目を実現するために様々な書き方ができてしまうため、あるルールに則って記述していかないと、一つの変更が予期せぬところのレイアウト崩れを発生させてしまいます。そのルールというのも、かなり練りこんだものでないとあとあと破綻してしまいます。 FLOCSSはそういった要点を抑えたうえで、U

RSGT2020が1/8~10に開催された。 昨年は楽しかったの一言に尽きたが、今年はとにかく考えさせられた。 というのも、私にとってここ2~3年のテーマだった、Agile × マネージャーというドンピシャなキーノートがSahotaさんよりあったためだ。 confengine.com 本記事では、このキーノートに焦点をあてる。 マネージャーを否定してはいけない Sahotaさんのセッションで最も印象に残った言葉が、「組織を変革させるとき、誰も取りこぼしてはいけない」というものだ。 私がBas(LeSSの提唱者)の認定スクラムマスターの研修に参加したとき、どんな役割を今やってますか？と質問された。 私はそのときScrumを推進する人ではあったが、Scrum Masterではなかった。なぜなら、私の行う役割にはエンジニアの評価やエンジニアの採用も入っていたからだ。 そのときはEngineeri

文章の書き方に正解はない。 ただ、ちょっとした「コツ」みたいなものはあると思う。 僕は会社に入ってから9年間、「週刊文春」と「文藝春秋」の編集部で、文章に携わる仕事をしてきた。 たかだが10年足らずの経歴で何を偉そうに、と思われる方もいるかもしれないが、最近になってようやく、「文章を書くコツみたいなものがあるのではないか？」ということに気がつき始めた。 もちろん一流作家のような芸術的で天才的な文章を書くコツではない。文才の有無は関係なく、誰でもそれなりに整った文章を書くためのコツだ。 noteをやっている人の中には「何かを書きたい、でもどうやったら書けるだろう」と思っている人がいると思う。また、「書きたいんだけど、素人の書いた文章みたいに読まれたら恥ずかしいな」と思って、躊躇している人もいるかもしれない。 さらに、「周りから『何でもいいからとりあえず書いてみたらいい』と勧められるんだけど、

こんにちは、株式会社アトラエでデザイナーをしています三上蒼太です。 この記事は、Atrae Advent Calendar 2019 の3日目です。 本記事では、Figmaでのデザインファイルの運用方法について書きます。 これが完成形という訳でもなく、まだ模索中の段階です。そしてチームのステージやメンバーの特性によって柔軟に変えていくものだと思っています。 運用方法に迷われている方の一つの参考事例となれば幸いです。 そもそもなぜ"運用"が大事？ サービスは、公開して終わりではありません。 運用し、機能を追加したりABテストするなどしながら設定した目標を達成すべくアップデートしていくことが前提です。 また、サービスの運用は短期的なものではありません。 数年、もしかしたら数十年のスパンの中で、いろんなステークホルダーが参画しては抜けてを繰り返しながら進んでいくはずのものです。 サービスデザイン

CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分