はてなブックマーク

Blog Tag すべて すべて デザイン タイポグラフィ 読書メモ コーディング WordPress Webサイト改善メモ 制作環境 スケッチ（2024年1月〜3月） 2024.4.4 デザイン GoodNotes 6のインターフェイスの使用感について、第一印象と6ヶ月後の比較 2024.3.6 デザイン 制作環境 ChatGPTに哲学について聞いてみた 2024.3.3 デザイン Markdownとマインドマップの違いを、情報整理・運用の観点で考えてみる 2024.2.18 デザイン 制作環境 Dekoni Audio製WH-1000XM3用レザーイヤーパッドの第一印象レビュー 2024.2.4 制作環境 スケッチ（2023年1月〜12月） 2024.1.6 デザイン 書籍『世界で一番やさしい考え方の教科書』の感想とメモ 2023.12.31 読書メモ hover状態のデザイン、Pri

概要と感想 書籍『THE MODEL』では、マーケティング、インサイドセールス、営業、カスタマーサクセスの連携について紹介されています。初めて知るマーケティング用語やビジネス用語を学ぶきっかけになり、勉強になりました。各部署のフローを図で見られたのも良かったです。 一方でマーケティングやビジネスに関する略語や専門用語を知らずその都度調べる必要があったので、読み進めていくのに時間がかかりました。また1度読んだだけでは理解ができなかったので、自分の場合は新しく知った用語を振り返りつつ何度か読み直す必要があると感じます。 新しく知った用語や定義の振り返り 主に自分用のメモですが、『THE MODEL』で触れられているマーケティング用語やビジネス用語について、新しく知ったものや意味を調べ直したものをまとめています。 意味は調べた上でメモしていますが、用語の定義を誤って書いている可能性があります。お

line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 Webサイトのコーディング（実装）では、デザインデータ通りの数値を反映しているにも関わらず、ブラウザ上の表示がデザインデータと比べてずれる（余白が大きくなりすぎる）場合があります。 これはブラウザのline-heightの仕様によるものですが、line-height制御の難しさがデザインデータとコーディング後（ブラウザ表示）の余白のずれにつながっていると考えています。 この問題を解決するため、line-heightの不要な上下の余白を打ち消すCSSを試したところ効果を実感できたので、この方法のメリット・デメリットや活用についてまとめました。 チームで進めている実際のプロジェクトでこの方法を試してから、2020年1月の時点で9ヶ月ほど経ちますが、メリットとデメリットを比較してメリットが完

デザインする際に意識している8の倍数ルールについての記事です。Webサイトやアプリなどスクリーン用のデザインの際には、基本的に要素の大きさを8の倍数ピクセルで設計しています。 ここでいう要素とは、コンテンツ幅、ボタンの大きさ、余白の大きさ、バナーの大きさ、メインビジュアルの大きさなど、サイズ指定が必要なほぼ全て要素を指しています。 8の倍数によるデザインルールはこれまでに16以上のプロジェクトで活用してきました。ルールを用いることのメリット・デメリットや、そのルールを使い続けている理由を当Webサイトの事例と共にまとめています。 ※フォントサイズは8の倍数ではなく、18pxを基準とした倍率計算によって算出する方法を試しています。詳しくは以下の記事にまとめています。 Webサイトで明快なデザインと運用しやすいコーディングを両立する文字サイズ強弱の仮説・検証 8の倍数で設計する理由とメリット

タイポグラフィとデザインルール設計についての記事です。Webサイトの文章の読みやすさに焦点を当てています。 このWebサイトをご覧いただいた方に感想を聞いてみたところ、ありがたいことに「読みやすいですね」であったり、「見やすくて良いですね」と言っていただけることがあります。読みやすいと感じていただけるのは、とても嬉しいことです。その一方でなぜ「読みやすい」と感じていただけたのか、「読みやすい」とは具体的にはどういうことなのかを改めて考えたいと思います。 「読みやすさ」を決める要素を分解することでタイポグラフィの理解が深まると考え、このWebサイトの構築にあたって意識したことや設計方法について書き出してみました。 意識したことはWebサイト全体の統一感と秩序の維持 このサイトを構築するにあたって、タイポグラフィのルール設計で意識したのは「サイト全体の統一感と秩序の維持」です。情報の優劣がわか