自分は外資コンサルのSI/業務側で5年、ソフトウェアエンジニアとして5年、マーケティング+経営領域で1年仕事をした(ソフトウェアエンジニアリングからマーケティングに移った経緯)。特にここ一年、今まで体系的に学習したことがないマーケティング領域で仕事をしており、とにかくわからない事だらけだった。バンドルカードというプロダクトを1から作っている為、ユーザーインタビュー/仮説立案/属性別リテンションレート/運用型広告等、めちゃくちゃ基礎的な部分に関してはソフトウェア書く人間ではあったがある程度学んではいたし、スタートアップという業界柄paulg、cdixon、sama、peterthiel, a16z、等が出力する良質なコンテンツは適宜読み込んではいた。(paulgのessayは多分全部読んでる) ただ、「マーケティング」という単語を出されると「それは…あの…具体的には一体なんですか？」という感
デザインシステム｜デジタル庁
デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます。 更新情報2023年12月26日 [バージョン1.4.1]スタイルやコンポーネントの修正・更新を行いました 2023年10月18日 [バージョン1.4.0]スタイルやコンポーネントの追加・修正・更新を行いました 2023年8月31日 [バージョン1.3.4]スタイルやコンポーネントの修正・更新を行いました 2023年7月31日 [バージョン1.3.3]新規コンポーネントを追加、スタイルやアセットなどについて修正と更新を行いました 2023年6月29日 [バージョン1.3.2]コンポーネントを追加、テンプレートやガイドラインの一部修正と更新を行いました 2023年6
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
これは何かGoogleの Material Design Guideline - Data Visualization がとても良くまとまっていたので、自分なりに和訳・編集してまとめたものです。 ※ 注意事項 こちらはあくまで、もとのドキュメントを参考に筆者が和訳・編集したものになります。原文の完全な和訳ではなく、抜粋の範囲や、英=>和の際の意訳を筆者が恣意的に行っています。 筆者の意訳・編集による曲解や元のドキュメントでのオリジナルの文意が気になる方は原文を読むことを強くおすすめします。 和訳の公開の可否についてはGoogle社に直接問い合わせています。1 / 原理原則（Principles） データの可視化は、複雑で内容の多い情報をグラフィカルな形式で表現するコミュニケーション手段である。 可視化の結果、データを比較しストーリーを伝えることが容易になり、データの利用者の意思決定の助け
PowerPoint歴23年、デザイナー歴20年、経営者として10年以上に渡って自社のマーケティングやセールスに深く関わり、提案書を作ったコンペでの勝率91%を誇る私の知見を余すことなく注ぎ込んだ、『最強の提案書を作る方法～伝わるストーリー・コピー・デザインの法則』というスライドを公開しました。 便宜上「提案書」としていますが、企画書、営業資料、ホワイトペーパー、社内文書など、人を動かすために作られるすべてのビジネス文書に応用できるはずです。 提案書のストーリー、コピー、デザインに関する、実践的かつ具体的なノウハウを詰め込んでいます。デザインについては、プロのデザイナーではなく一般のビジネスパーソンを対象とし、仕事の中で本当に必要な知識だけをまとめています。 約170ページある本スライドは、私が企業向けにこれまで20回以上行ってきた有料講座の配布資料を元に、公開用に仕上げたものです。スライ
個人的UIデザインの情報源まとめ
どうも。 最近エンジニアからデザイナーになったものです。 最近UIデザイナーになってUIデザインの情報源って意外とまとまってないなと思ったので、個人的によく参考にする情報源をまとめました。 ここに載ってないやつでおすすめの情報源あればコメントとかで教えてください。 OSガイドライン OSのデザインガイドラインはUIデザイナーだったら必ず読んでますよね。 Material Design デザインシステム的な話から装飾、カラーツールなどデザインに必要な話がとてもたくさん詰め込まれているためデザイン学習の教材として非常に優秀です。コンポーネントもユースケースやスペックまできちんと網羅されていて参考になるし、金と手間隙かかってるなあと思います。 Blogもあり、更新頻度は高くないですが面白い記事が多いのでたまに読んでいます。 Human Interface Guidelines こちらはApple
この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（14個） 2. パターンツール（7個） 3. イラスト系ツール（3個） 4. デザインツール（10個） 5. 配色カラーツール（6個） 6. グラデーションツール（3個） 7. SVGツール（8個） 8. スクリーンショ
プロジェクトが始まるときにかなり初期の段階でWBSを作ることは多いとおもいます。そのWBSの作成、プロマネやディレクターに任せっぱなしになっていないでしょうか。WBSはスケジュールをガントチャートで表したものを指していると思われがちですが、実はスケジュールだけでなく見積もりやアサインを精度高く行うためにも重要なものです。 たとえば「Webデザイン作成」というスコープにどのような実作業が含まれているかはWBSを作ることによって見える化しプロジェクトメンバーやクライアントと共有できるようになります。ときどき下記のように書かれたWBSを見ることがあります。 Webデザイン作成 ・作成 ・確認 ・修正 ・確認2 ・修正2 ・確定 しかし、これでは「Webデザイン作成」に必要な知識、さらには作業量・スケジュール・予算も分かりません。Webデザイン作成の例を続けると、下記のように「作成」のスコープを分
エンジニアのための Figma 知識
本記事の多くは Inspect モードを前提に解説しています。 下記に Dev Mode に対応した解説を書いてみたのであわせてご参照ください。 https://codezine.jp/article/detail/18000 エンジニアにデザインツールの知識・習熟は必要か？ しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。 という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。 ユースケースを考える まず始めにデザインは作らないはずのエンジニアが Figma を使う時にどんなユースケースがありそうかを考えてみます。 デザインを元に実装する時 デザインから何かを生成したい時(コードとか画像とか) 自分でちょこっとデザイン修正しちゃう この辺りがあるかな〜
Web・アプリ開発のエンジニアが知っておきたい、デザインツール「Figma」の基本 - JMDC TECH BLOG
JMDCでアプリのデザインを5月から担当しているはんざわです。 Webやアプリのフロント開発者のみなさんはデザインツール Figmaをご存知でしょうか？ JMDCではこれまでAdobe XDをメインで使用していました、今年からFigmaに乗り換えました。 乗り換えに伴い、デザイナー以外のメンバーにもFigmaを操作できるようになるべく、勉強会を開催しました。 勉強会はオンラインで開催。Figmaで資料を作成、参加者に資料を開きながらGoogle Meetを繋げて詳細を説明していきました。 勉強会で使用した資料はFigmaのCommunityにアップしているのでぜひ見てみてくださいね。 www.figma.com エンジニアがFigmaを触れるようになることのメリット 基本知識と基本操作 実装するために使う デザインシステムについて そのほか便利な機能 さいごに エンジニアがFigmaを触れ
画面をデザインするということ - Qiita
この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている１エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 （実際にUX５段階モデルを意識して仕事してるわけではありませんが、何かしら
いつもはてなブックマークをご利用いただき、ありがとうございます。 はてなブックマークでは、「興味関心を持つ人みんなが、よいコンテンツに巡り会えるようにする」ことを目指す取り組みの一環として、サービスの出発点である興味と発見を軸に、よい“作品”を見つけてくれたブックマークユーザーを表彰する はてなインターネット文学賞「作品発掘部門」 を開催しました。 インターネット上にあるすべての作品を対象に、「まだ誰にもブックマークされていない作品」や「これまでにはてなブックマークで見たことがないような新鮮な作品」から、過去にブックマークした「何度も読みたいお気に入りの作品」や「もう一度みんなに読んでほしいおすすめの作品」まで、幅広く作品の発掘を募集しました。 結果、総計556件（公開設定でのブックマークのみ対象）のご参加をいただきました。発掘いただいた作品そのものの注目度や、発掘作品へのブックマークコメ
以前勤めていた会社はデザイナーが遠隔地にいたため、クライアントと直接会わないことが多かった。そのためディレクターがクライアントに直接話を聴き、その内容を社内に持ち帰ってデザイナーに伝える、という制作工程が一般的だった。 デザイナーの中には、それでも器用にデザインができてしまう人と、そうでない人がいた。そして後者のデザイナーからは、こんな声がよく上がっていた。 前段のインプットが十分ではないので作りにくい クライアントと直接話ができないので作りにくい この時ディレクターをやっていた私は、この意見に一理あると思った。 そこで、前段の設計資料をサマリーせずにフルで共有したり、オリエンをより丁寧にしてみたり、クライアントとの打ち合わせに同席してもらう機会を設けるようにした。 結果どうなったかといえば、変わらなかった。なぜなら、デザインのクオリティが低かったのは、インプットやクライアントと直接会うか
ウェブデザインにおけるline-heightについて
ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 little UI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確
頭の良し悪しにかかわらず脳がだまされてしまう“錯視”（関連記事）の独創的な表現を決定する「ベスト・イリュージョン・オブ・ザ・イヤー・コンテスト」にて、「シュレーダーの階段」の動画が選ばれました。 錯視オブザイヤーとなった「立体版シュレーダー階段図形」 （画像はYouTubeより） 優勝したのは、明治大学で「錯覚／錯視」を研究する杉原厚吉さんが手掛けた「立体版シュレーダー階段図形」。杉原さんは過去にも優勝経験があり、上位入賞の常連。今回優勝した作品では、図を上下反転すると階段の最上段が一番下に逆転して見えるという、150年以上前から知られている「シュレーダーの階段図形」を立体で表現しました。 （画像はYouTubeより） 180度回転しても見た目はそのまま（画像はYouTubeより） 動画では錯視を分かりやすく体験できるように、目印となるコーンを「最上段」に設置。2次元の図を見るだけでも不思
シンプルなHTMLで、モダンなWebサイトをすばやく簡単に作成できるクラスレスの超軽量CSSフレームワーク -Simple.css
その名の通り、シンプルなHTMLで、Webサイトをすばやく簡単に作成できるクラスレスの超軽量（4kB）CSSフレームワークを紹介します。 シンプルなWebページ、ポートフォリオやブログなどをすばやく作成したい時に便利で、レスポンシブにもダークモードにも対応しています。また、CSSリセットとして利用するのもありかもしれません。 Simple.css Simple.css -GitHub Simple.cssとは Simple.cssのデモ Simple.cssの使い方 Simple.cssとは Simple.cssは、セマンティックHTMLをすばやく簡単に見栄え良くするクラスレスのCSSフレームワークです。「クラスレス」とは、CSSまたはHTMLのどこにもCSSのclassがないことを意味します。 MITライセンスで、商用プロジェクトでも無料で利用できます。 classのないプレーンなHTM
「専門性が高い人になりたいですか？」 そう問われたら、多くの人が「はい！」と答えるでしょう。エンジニアやデザイナーのような専門職に限らず、ビジネスパーソンの多くも、「できることなら何らかの専門性を高めたい」と思っているはずです。 しかし、そもそも「専門性が高い」とはどういう状態を指すのでしょうか。どんな人になれば「専門家」だと評価されるようになるのでしょうか。それを突き詰めて考えることが専門性を高めるヒントになると思い、少し深堀してみました。 最後には、まだ実験中ですが、ChatGPTを活用して専門性を高める方法をご紹介します。 専門性と体系化の関係 辞書サイトのWeblioを見ると、専門性とは「特定の分野のみに深く関わっているさま。高度な知識や経験を要求されることや、その度合い」と書かれています。この定義に従うと、専門性には「特定の分野の高度な知識や経験」が必要だということになります。
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。 一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはどこか？」と迷わないように誘導する大切な役割があります。 どんなサイトを作るときもほとんど必須のパーツですが、わたしは気付けばいつも似たようなレイアウトを使いがち…。そこで今回は、グローバルナビゲーションのデザインを100事例見比べて分類してみます🔍 ・ ・ ・ 1. スタンダード型まずは、一般的に「ヘッダー」の言葉で想像
CSSの進化は早いですね。 一昔前までは、JavaScriptを使用しなければできなったこと、かなり複雑なコードを書かなければできなかったことが、CSSだけで簡単にできるようになっています。 知っておくと便利なCSSのプロパティや疑似要素をまとめて紹介します。 CSS can do that? by Ananya Neogi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. box-decoration-break 改行する際の表示形式を定義 2. attr() -簡単ツールチップ 3. backface-visibility -フリップするカードも簡単 4. conic-gradient -円グラフを簡単に実装できる 5. filter -画像に多彩なフィルタを適用 6. mix-blend-mode -画像やテキストにも
インタフェースデザインのお約束
デジタル製品のデザインに役立つ101の指針。製品のユーザビリティや性能を高める上で必須かつ基本のツボ、マスターすれば時間を節約し顧客満足度をアップできるテクニックが101のコンパクトなルールにまとめられています。メッセージが明確で説明もわかりやすいので短時間で気軽に読むことができます。101のルールは、タイポグラフィ、コントロール、カスタマージャーニー、各種要素の統一、UX全般に関わるプラクティスに分類されているのでリファレンス的に読むことも可能です。「よくある落とし穴」を巧みに回避し、自信をもってユーザーのために闘い、すばらしいユーザーエクスペリエンスを提供するプロへと成長させてくれる一冊です。 ●翻訳者による「日本語版のサポートページ」。 ●日本語版独自の8つの追加ルールが収録された「訳者あとがき」のPDF（6MB）。 というわけで、この長すぎる「訳者あとがき」では、原著者があげなかっ
2022年のロゴデザインのトレンドはワードマークとタイポグラフィがより重要な役割を果たしています。特にジェンダーや環境配慮などはどのジャンルのデザインでも積極的に取り入れられています。 デザインの引き出しを増やすには、注目されているトレンドを押さえておくことが大切です。ロゴにはタイポグラフィ、カラー、形など、デザインの基本となる要素が詰まっており、最近のロゴデザインに使われているトレンド、デザインテクニックを紹介します。 2022 Logo Trend Report 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2022年、ロゴデザインのトレンドの傾向 三角形を2つ使用したロゴ「BowTies: 蝶ネクタイ」 一滴の重要性がわかるロゴ「Uvula: 口蓋垂」 ライフラインを表現するロゴ「Rooters: 木の根」 圧力を反転さ
デザインの引き出しを増やすためには、トレンドを押さえておくことは大切です。 デザインの基本となるタイポグラフィ、カラー、形などの要素が詰まった、最近のロゴデザインに使われているトレンド、デザインテクニックを紹介します。 2023 Logo Trend Report by BILL GARDNER 下記は各ポイントを意訳したものです。 ※元サイト様にライセンスを得て翻訳しています。 2023年、ロゴデザインのトレンドの傾向 花々を新しい解釈でデザイン「Wildflowers: ワイルドフラワー」 存在感のある流体の形状「Bloblend: ブロブレンド」 焦点の合った要素と合っていない要素をブレンド「Fades: フェード」 三次元の形を表現する「Foreshort: フォアショート」 上昇を表現する新しいデザイン「Thrust: スラスト」 自然界の神聖な数式から生まれた形「Spirals
この記事では、2021年に公開された便利なWebオンラインツール・ベスト100個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2021年にかけて合計338個の新しいツールやサービスを紹介してきました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（11個） 2. パターンツール（3個） 3. イラスト系ツール（9個） 4. デザインツール（17個） 5. 配色ツール（7個） 6. グラデーションツール（12個） 7. SVGツール（9個） 8. スクリーンシ
『ファイナルファンタジーXVI（FF16）』レビュー。これは「堅実」か、それとも「無難」か。ゲームをクリアさせることに特化させたゲーム - AUTOMATON
『ファイナルファンタジー』のナンバリングタイトルは、1本1本が、それぞれの個性をもっている。そんな中、3Dバトルアクションというシステムを引っ提げて登場した新星、『ファイナルファンタジーXVI』の個性は古典主義的アプローチに基づく「安定した体験」であった。これは「堅実」か。それとも「無難」か。ただひとつ言えるのは、この「心のなかで賛成と否定が互いに響き合う感覚」こそ『ファイナルファンタジー』の華であるということだ。 古典主義的アプローチ 思えば『ファイナルファンタジー』というシリーズは、常に時代のうねりと共にあった。時に自らムーブメントを生み出し、時にムーブメントに振り回されながら、良くも悪くも1つ１つのタイトルが唯一無二の個性を放っていた。そしてそれは16番目のナンバリングタイトルとして発売された『ファイナルファンタジーXVI』（以下『FF16』と表記）についても同様である。『FF16』
デザインの引き出しを増やすためにも、トレンドを押さえておくことは大切です。 タイポグラフィ、カラー、形など、デザインの基本となる要素が詰まった、最近のロゴデザインに使われているトレンド、デザインテクニックを紹介します。 ロゴのトレンドの最新版は、こちら。 2021年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ 2019 Logo Trend Report 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 トレンドの流れを見るのも面白いと思うので、過去分も。 2018年のロゴデザインのトレンド 2017年のロゴデザインのトレンド 2016年のロゴデザインのトレンド 2015年のロゴデザインのトレンド 2014年のロゴデザインのトレンド 2013年のロゴデザインのトレンド 2012年のロゴデザインのト
文章一行でAIがWebサイト構築、外部資金調達なしで5.4万ユーザを集めた豪Relume——NikeやDapper Labsも利用 - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
Image credit: Relume ワンセンテンスの Web デザインは、もはや夢物語ではない。Wix、Weebly、Webflow のテンプレートを使えば、自分のスタイルで Web サイトを組み立てることができる。 しかし、これはレイアウトに限ったことではなく、Web サイトの構成を考え、各ページの内容も、訪問者を惹きつけるために慎重に設計する必要がある。例えば、「About」ページでは、サービス紹介やビジネスストーリー、将来のビジョンなどを掲載するため、コンテンツの設計に手間がかかる。 この問題を解決するために、デザインスタートアップ Relume は、AI が生成する Web サイトデザインプラットフォーム「Relume Ipsum」を開発した。これにより、数週間から1ヶ月程度かかっていた Web サイトを完成させるまでの作業負荷をわずか数分にまで軽減することができる。このプロ
本記事は、ShakuroのRita Kind-Envy氏による「UI/UX Design Trends Of 2022 You Need To Catch Up To」（2021年11月15日公開）の和訳を、著者の許可を得て掲載しているものです。 はじめに 2021年は2020年よりも良い年でしたか？UI/UXデザインに限って言えば、そうです。新しい素晴らしいウェブサイトやアプリが生まれ、グラフィックデザイナー向けの新しいソフトウェアがリリースされ、創造性が泉のように湧き出ているようでした。 デザイナーが在宅を余儀なくされると、より多くのものを生み出し、すでに存在するものについて考える時間ができます。退屈はアーティストの最大の敵で、その解消のために努力します。 世界の他の分野では、2021年は非常に困難な年でした。世界最年長の猫は34歳の誕生日を迎えました。うーん、そう、良かったのはそれだ
CSSの便利ツールが登場！ レスポンシブ対応のフォントサイズを超簡単に定義できる -Modern Fluid Typography Editor
Webサイトをレスポンシブ対応にする時、フォントサイズをさまざまなスクリーンに最適なサイズにします。スマホ用のfont-size、デスクトップ用のfont-sizeを定義するのも一つの方法ですが、font-sizeの最小値と最大値とその間の値を流動的にするclamp()を使用すると簡単に定義できます。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 最近のやり方としてはvw, calc()を使用したフォントサイズの定義などがありますが、clamp()を使用するとかなり簡単です。最小値と最大値を決め、その間の変化の度合いも変更でき、もちろん日本語フォントのfont-sizeでも大丈夫です。 Modern Fluid Typography Editor Modern Fluid Typography Editor -GitHub Modern Flu
こんなデザイン書を待っていた！ 日本語フォントを使ったデザインの基礎知識と実践テクニックがしっかり学べる解説書 -タイポグラフィが上手くなる本
デザインにおける文字の使い方、特に日本語フォントについて書体の選び方、文字組、レイアウトの知識とテクニックを、プロが現場でクオリティを上げるためにどうしているか詳しく解説した永久保存版のデザイン書を紹介します。 本書は日本語のタイポグラフィに特化された解説書で、ひらがな・カタカナ・漢字が扱われています。もちろん、数字や記号文字も使用されていますが、英語に関してはほぼありません。
CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/
20世紀末に発表された評伝によって近代デザイン史、タイポグラフィ史における重要人物のひとり、エリック・ギルの「不都合な真実」が明らかになった。以来、ギルの業績やその書体の運用をめぐって、さまざまな議論が交わされている。作者とその制作物は切り離して考えられるのか、否か。国際的に活躍する書体デザイナーが考える。 バナー画像：エリック・ギル、1908-9年頃（出典：Fiona MacCarthy, Eric Gill: Lover’s Quest for Art and God, 1989） 日本およびタイポグラフィの世界でエリック・ギル（図1）といえばエドワード・ジョンストンの弟子、そしてGill SansやJoanna、Perpetuaなど名作とされる書体の作者として有名だ。特に人気のGill Sans（図2）は、ジャンルとしてはヒューマニストサンセリフまたはジオメトリック（幾何学的）サンセ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、フロントエンドエンジニアの近藤です。Yahoo! JAPANのスマートフォンのウェブトップページのフロントエンド開発業務と、社内で利用されているデザインシステムの開発に携わっています。 近年、デジタルプロダクトを持つ多くの企業で、デザインシステムが活用されています。デザインシステムには、ビジュアルとしてのデザインの規定だけでなく、実際のプロダクトに利用できるUIライブラリやコンポーネントライブラリなどが含まれます。そのため、デザインシステムの構築にはデザインとエンジニアリングの両方の力が不可欠です。 本記事では、私が開発に携わっているデザインシステム「Riff」の紹介とともに、フロントエンド部分におけるデザインシステム
夫婦マンガ家・うめが建てた“公私混同”の家。「仕事」と「生活」はあえて分けない【作家と家】 - MY HOME STORY │スーモカウンター注文住宅
自宅と仕事場を兼ねているケースが多い、小説家や漫画家、美術家など作家の家。生活の場であり、創作の場でもある家にはどんなこだわりが詰まっているのでしょう。 作家の家を訪ね、その暮らしぶりや創作風景を拝見する連載「作家と家」。第2回は『大東京トイボックス』、『スティーブズ』（小学館）、『東京トイボクシーズ』（新潮社）などで知られる2人組漫画家・うめの自宅を紹介します。 仕事のパートナーであり、夫婦でもあるお二人。作画・演出を妻の妹尾朝子さん、企画・シナリオ・演出・CGを使った背景制作を夫の小沢高広さんが担当しています。 もともと賃貸派だったそうですが、偶然が折り重なり合い、2014年に3階建ての注文住宅を建てました。なぜ「建てる」という選択に至ったのか。仕事や生活、子育てが混在する空間をどのように行き来し、いかに両立しているのか。お話を伺いました。 ※取材は、新型コロナウイルス感染症の予防対策
Appleイベント終了。新iPad AirやApple Watchなど、発表された内容を総まとめ！ #AppleEvent
Appleイベント終了。新iPad AirやApple Watchなど、発表された内容を総まとめ！ #AppleEvent2020.09.16 06:55140,611 satomi そうこ 西谷茂リチャード Touch IDの帰還。 2020年9月16日（水）日本時間の深夜2時からスタートしたAppleイベント。発表内容を、すべてこの記事にまとめます。 おはよう、Apple Eventスタートだオールブラックに襟元に白シャツがのぞくコーデ素敵。発表されたプロダクトは4つ！ 最強のAppleスマウォ Apple Watch Series 6、廉価でお手軽なApple Watch SE、新しいiPad（第8世代）、そしてiPad Pro顔負けのiPad Air。 それから各OSのアプデ配信日がアナウンスされました（翌日から〜）。でもiPhone 12はお預け！ Series 6はApple
これまでとは異なるCSSフレームワークが登場しました！ Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数（カスタムプロパティ）で記述されています。レスポンシブ対応で一貫性のあるUIコンポーネントを簡単に、素早く実装できます。 単独でも他のフレームワークとの併用も可能で、カラーのみグラデーションのみシャドウのみタイポグラフィのみメディアクエリのみといった使い方もできます。 Open Props Open Props -GitHub Open Propsとは Open Propの使い方 Open Propsのデモ Open Propsとは Open PropsはこれまでのCSSフレームワークとは一味も二味も異なる、CSS変数（カスタムプロパティ）ベースのCSSフレームワークです。巧妙に設計されたWebデザイントークンは、一貫性のあるUIコンポーネントを素早く実
ご無沙汰しています。前記事から 3 年ぶりに note を更新しました。本稿では、芳文社の発行する「まんがタイムきらら」やその姉妹誌に掲載された作品の写植（吹き出し）に注目し、使用されている書体や、その書体が読者に与える印象に関して考察を行います。 「ぼっち・ざ・ろっく！」観てますか？？図 1：｢ぼっち・ざ・ろっく！」の単行本（筆者撮影）アニメを観てから完全に難民になってしまったので、原作を無限に読んでいます。アニメよりもテンポが早く、4 コマの起承転結を通じて 1 つのストーリーが構成されている点が（ぼざろに限った話ではないですが）素晴しいです。未確認ライオット編よかった…… さて、アニメでは数多の声優さんの演技によって、登場人物の描き分けや感情表現が行われていますが、漫画においては写植、すなわち吹き出しの部分が登場人物の喜怒哀楽の表現に一役買っています。 印刷物のデザインでは「1 ペー
メディア統括本部・技術横断室の谷です。組織横断の活動しながら、AmebaやAmebaマンガという事業に関わっています。実務としては、コード実装をメインに、UI設計やUX設計、最近ではユーザーインタビュー等のリサーチ業務をおこなっています。 この記事では私が立ち上げから2年くらいかけて関わってきたAmebaのデザインシステムについて、その全貌を解説します。 そして本日からデザインシステム「Spindle」のサイトを試験的に一般公開します。詳しくは記事後半にて。 まず前段のお話として、Amebaという事業について説明させてください。 Ameba事業の概要 Amebaはブログサービスであるアメーバブログを主としたサイバーエージェントのメディア事業の1つです。 多くの人はおそらく「アメブロ」や「ピグ」の印象が強いですが、関連事業やサービスとしてはマンガや占い、ニュースなど色々と展開をしています。
『ゴースト・オブ・ツシマ』レビュー。オープンワールドによる表現の地平を切り拓く、新時代の時代劇 - AUTOMATON
ゲーム開始前、正直私は飽き飽きしていた。また本筋と関係ない「お使い」をこなし、拠点を潰すことになるのかと。オープンワールドといえばいつもコレだ。別に嫌いではないし、むしろ好きではあるが、問題がひとつ。コントローラーを握り続けていると、何を遊んでいるのかわからなくなる時がある。本来の目的を忘れさまざまな遊びにふけっているとき、ふとこれでいいのかと考える瞬間がある。私は思うのだ。オープンワールドに物語を持ち込むべきではないのかもしれないと。だが『ゴースト・オブ・ツシマ』は成し遂げた。散逸的なゲームプレイとナラティブの融合を。映画をゲーム化するのではなく、ゲームを映画化するという、前代未聞の挑戦を。 『ゴースト・オブ・ツシマ』は13世紀の日本において2度に渡り行われた蒙古（モンゴル帝国）襲来、うち1274年に起こった「文永の役」の数ある戦地のひとつである対馬を舞台に据えたオープンワールド・アクシ
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator
Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。 このclamp()関数を使用して、CSSでレスポンシブ対応のフォントサイズやレイアウトを簡単に定義できるツールを紹介します。ツールはオンラインでも、ローカルでも利用できます。 Min-Max Calculator Min-Max Calculator -GitHub Min-Max Calculatorの特徴 Min-Max Calculatorの使い方 Min-Max Calculatorの特徴 Min-Max Calculatorは、レスポンシブ対応にする時
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マーケティング素人のエンジニアが1年間マーケティングをやった際に読んだ本
Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
この記事の元の本編は削除しました。｜樫田光 | Hikaru Kashida｜note
提案書の書き方、徹底解説～提案書のストーリー・コピー・デザインの基本法則【スライド付】 | knowledge / baigie
Web制作の時短に！2020年の便利オンラインツール・ベスト100選
Webサイト制作をどれくらいの粒度で分解してタスク化するか｜重松佑 / Shhh inc.
結果発表！はてなインターネット文学賞「作品発掘部門」 - はてなブックマーク開発ブログ
理由はいいから腕を磨け | ベイジの日報
UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める
階段を上ったはずが降りていた 錯視オブザイヤー2020は日本人制作の「シュレーダーの階段」が優勝
さて、専門性と体系化の話をしようか | knowledge / baigie
ヘッダー（グローバルナビゲーション）のデザイン事例100選｜akane
CSSでここまでできるのか！知っておくと便利なCSSのプロパティや疑似要素のまとめ
2022年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
2023年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
Web制作を変える！2021年の便利オンラインツール・ベスト100選
2019年のロゴデザインのトレンド -2019 Logo Trend Report
【2022年】注目すべきUI/UXデザイントレンド - Qiita
より良いタイポグラフィのための知られざるCSS
書体は作者の罪を背負うか｜ARTICLES｜The Graphic Design Review
フロントエンドから取り組むデザインシステムの改善 #UI
これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props
まんがタイムきららの「写植」を読む――吹き出しにみる漫画書体の使い分け｜いなにわうどん
Amebaのデザインシステム「Spindle」の全貌公開