先日開催された「フロントエンドカンファレンス福岡2019」で、「音楽、数学、タイポグラフィ」というプレゼンテーションをする機会をいただきました。ここにその内容を再構成して掲載します。 みなさんこんにちは。今日の僕の話のテーマは「タイポグラフィ」です。まず最初に、そもそもタイポグラフィとは何なのかということからお話ししたいと思います。タイポグラフィというのはよく耳にするキーワードではありますが、じつはかなり誤解も多いのではないかと僕は考えています。 PxHere Typography from Hermann Esser’s (1845–1908) Draughtsman’s Alphabet, from rawpixel’s own antique edition 00030.jpg たとえば、GoogleやTwitterやなんかで「タイポグラフィ」というキーワードで検索すると、手描きによ

作り続けるだけだと小さくなるデザイナーがデジタルプロダクト（web サービスやアプリなど）に貢献できることは山ほどあります。しかし、デザイナーの視点で気になるところを改善しても組織からの評価は上がらないですし、ユーザーにも大して価値提供ができない場合があります。デザイナーのもつユニークな視点はプロダクトに多大な価値を提供できる可能性を秘めているものの、ただデザインしていれば自然とうまくいくわけではありません。 さらにやっかいなことに、デザインの依頼が次々とやってきます。「あれを作って欲しい」「これを試して欲しい」といった要望は絶えないので、ついつい受動的な動きになってしまいます（一概に悪いコトではないですが）。能動的なデザインの仕事をするために視座を変化させなければ、いつまでたっても、周りから来る依頼をさばく以上の活動ができません。そうした状態が続くと、少しずつデザイナーの仕事範囲は小さく

お問い合わせフォームの入力を完遂し、送信してもらうために改善しておきたい16のポイントを紹介します。サイトリニューアルの要望でよくある「お問い合わせ数を増やしたい」に応えるために最低限おさえておきたい情報をまとめました。ぜひ参考にしてみてください。 問い合わせ時に必要な項目のみに限定する 「この項目は本当に必要か？」いつも疑うようにしています。お問い合わせ時に必要な情報なのか？その後の打ち合わせで電話番号や住所など聞くことはできないのか？不要な項目を削除し、本当に必要な情報のみに限定することでユーザーも入力しやすくなります。 郵送で資料を送る資料請求フォームは住所は必要です。しかし、質問などメールだけでのやりとりのためのお問い合わせフォームであれば住所の情報は不要なので削除します。クライアントと相談しながら常に減らす意識は持つようにし、ユーザーの手間を省くようにします。 入力欄の数は最低限

ユーザーエクスペリエンスをサポートするには、色を賢く組み合わせることで、うまく調和させ、圧迫感を出さず、インタフェース内のどこでも同じ種類の情報を伝えることが必要である。 Using Color to Enhance Your Design by Kelley Gordon on June 6, 2021 日本語版2021年11月9日公開 色は、デザイナーにとって最も重要かつ影響力のあるツールの1つだ。デザインにおいて、色は、ブランドの雰囲気を定め、そのイメージに影響を与え、ユーザーの注意を引き、彼らの感情に影響を与え、ユーザビリティを向上させることができる。しかしながら、適切な色の組み合わせを見つけるのは難しく、基本的な知識と練習が必要である。 色相環の説明 色とは、さまざまな光の波長を人間の目がどのように受け止めるか、ということだ。1666年、Issac Newton卿は、以下の3つの

ブラウン管や液晶ディスプレイ、スマートフォン、デジタルカメラでは、赤・緑・青の3種の三原色を組み合わせることで幅広い色を再現するRGBカラーモデルが採用されており、ウェブページや画像の色合いはRGBで「同じ色」になるように指定されています。しかし、ムービーの場合はそもそも同じRGBが出力されないという問題が存在するという点について、ビデオパフォーマンスモニタリングツールを販売するMUXが解説しています。 Your browser and my browser see different colors | Mux blog https://mux.com/blog/your-browser-and-my-browser-see-different-colors/ 色の見え方には観測者同士による差異が存在するため、デジタルの世界では色を定量化するために、赤(R)・緑(G)・青(B)をそれぞれ0

WebページやOSのUI、エディタなどのソフトウェアでフォントのサイズや行の高さを設定した際に起こる問題点と解決方法を紹介します。 Font size is useless; let's fix it by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントのサイズにおけるポイントとは emスクエアとは font sizeにおける問題点 解決方法 line height（行の高さ）もめちゃくちゃです 予測が可能なline height（行の高さ） 終わりに はじめに あなたのお気に入りのエディタに、"font_size": 32を設定するとどうなりますか？ お伝えしたいことがあるので、聞いてくれたら嬉しいです。 実際にやってみました。 私はmacOSでSublime Textを使っています

キャレットアイコンは、アコーディオンがその場で開くのであって、新しいページへの直接のリンクではない、ということを最も明確にユーザーに示すことができていた。 Accordion Icons: Which Signifiers Work Best? by Page Laubheimer and Raluca Budiu on August 23, 2020 日本語版2021年4月8日公開 アコーディオンが、現在、人気のあるUI要素であるのには理由がある。というのも、モバイルでは、コンテンツを折りたたんでページの長さを管理可能にする不可欠なツールになっている一方、デスクトップでも、視覚的な複雑さを軽減し、ユーザーが目下のタスクに最も関連性の高いコンテンツに集中できるようにしてくれるからだ（複雑なアプリケーションには特に適している）。 モバイルUXとアプリケーションデザインの両方の講座でよく聞かれ

画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー

※前回の2020年12月からベゼルレスのiPad mini6（8.3インチ）が出たので更新しています。 記事の詳細の内容はiPad mini6が入っていない内容です。 MacBookもM1チップでProじゃなくてAirで十分みたいになっていて、大きさやスペックが大きければいいみたいな時代は終わって、自分に合ったものを選ぶ人がより増えてきたように感じています。 前回が2019年5月にレスポンシブデザインのブレイクポイントの記事を書いて、今でもたくさんのアクセスがあり、たいへん嬉しく思っています。 そこで今回2021年に向けて内容を見直しました。 最近発売されたベゼルレスのiPad AirやiPhone12 miniなど新しいサイズも増えて、より複雑になった印象です。 iPadのSplit Viewを気にしない人は、去年と同じ560px/960pxでも問題はないです。 hashimotosan

ブラウザのタブやブックマークに表示される「Favicon(ファビコン)」は、ウェブサイトを印象づける重要な要素です。そんなファビコンを作成しウェブサイトに表示させる最新の方法について、フロントエンドエンジニアのAndrey Sitnik氏が解説しています。 How to Favicon in 2021: Six files that fit most needs — Martian Chronicles, Evil Martians’ team blog https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs ファビコンは2000年代初頭に生まれたコンセプトで、インターネットに公開するウェブサイトはファビコンを備えているべきだとSitnik氏は主張。しかし、ウェブサイト

デザイン指標を作っても失敗するパターン プロダクトを通してユーザーに価値提供できたか評価するためにデザイン指標は欠かせない存在です。書籍を読むなどして学習すれば指標は作れるようになりますが、その指標を使って Web サイトやアプリなどのデジタルプロダクトを評価し、改善するような体制を作るのは簡単なことではありません。 そもそもユーザーに価値提供できているかを評価することが、プロダクトに携わるデザイナーや開発者の評価に結び付いていない場合があります。現場では「ユーザーに価値提供したい」という気持ちで仕事をしていたとしても、自身とプロダクトの評価と結び付いていなければ、ただ指標を計測しているだけになります。 デザイン指標との相性が良くないのは、プロダクトを作る人たちの評価が売上目標に直結している組織です。 そういう組織では、ユーザーの課題解決ではなく、いかに売りやすくするかを優先しがちです。特

Webサイトにファビコン（favicon）を設定しておくことで、ブラウザのタブやGoogleの検索結果にアイコンが表示されるようになります。 今回は、2021年現在のファビコン（favicon）の設定方法とおすすめの作成ツールについてご紹介したいと思います。 ファビコン（favicon）とは？ ファビコンとは、Webページごとに設定されるブラウザのタブなどに表示されるアイコンのことです。 PCのブラウザでWebサイトを開くと、タブごとにサイト名の隣にアイコン画像が表示されますが、その画像はWebページ側で指定したアイコンが表示されるようになっていて、ブラウザでの見た目が分かりやすくなるだけでなく、Webサイトのブランディングやイメージ作りにも影響を与えます。 ファビコンは、主に下記の箇所に表示されます。 必ずファビコンを設定しないといけないわけではありませんが、ファビコンが設定されていない

モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。 この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。 上下中央揃え: place-items: center まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここでは、plae-items: centerを使えば、思ったよりに簡単に実現できます。 まず、display: gridを記述したら、一緒にplace-items: centerを同じ要素に追加します。place-itemsは、align-itemsとjustify-itemsを同時にスタイリングできる簡略化表記、ショートハンドです。centerに設定することで、align-itemsとjustify-itemsの両方がcenterとして設定されます。 .paren

デザインと1pxのずれもなく、HTMLとCSSで実装することを「ピクセル パーフェクト」と言います。このピクセル パーフェクトは必要なのか、現在の制作で求められているのは何か、ルックアンドフィールに合わせた実装を紹介します。 The State Of Pixel Perfection by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ピクセル パーフェクトとは 2010年頃のWeb制作 ルックアンドフィール コード化された結果がパーフェクトかどうかの判断 バリエーションとコンテキスト 現在の状況 モダンCSS CSSフレームワークの影響 好き嫌いではなく、期待通りに デザイナーに役立つアドバイス デベロッパーに役立つアドバイス 終わりに はじめに 「ピクセル パーフェクト」という言葉を最

アプリケーションをデザインする際、ほとんどのデザイナーはコンテンツページには労力を費やしますが、登録フォームは見過ごしがちです。ユーザーが辿り着くのは、視覚的に魅力がなく、無味で事務的なフォームです。白いバックグラウンド、まっさらなテキストフィールド、煩雑な文章、不快な黒のアウトラインがあちこちに散らばった、登録のモチベーションを掻き立てないフォームです。もしあなたのフォームがそんな状態であれば、改善の余地ありです。 あなたのアプリを使いたいユーザーはフォームの見た目に関わらず登録はしてくれるでしょう。しかし、まだ決めかねているユーザーは事務的なフォームを見て辞めてしまうでしょう。第一印象で多くの見込み顧客を失っている可能性があるということです。もっと機能的で魅力的なフォームにすることで、ギリギリで決めかねているユーザーの背中を押すことができます。 ビジュアルがユーザーを後押しする ある調

Please update your browser It seems you are using an old or unsupported browser. To continue enjoying Canva, please update to a recent version of one of the following browsers:

こんにちは、デザイナーの花ちゃんです！ 自社デザインチームで働いています。 LIGに入社してから作成したLIGブログのアイキャッチは300枚を超えました！ 私がアイキャッチを作成する上で最初の難関だったもの…… それは……文字の装飾！！ 前職ではスマホゲームのUI/UXを担当していました。ゲーム内イベントのキービジュアルやバナーを作成する際は、世界観にあったフォントがある程度決まっていたので、その中から合ったものを選択していたのですが……ブログのアイキャッチとなると、毎回記事の内容、書き手のキャラクターによってテイストや組み合わせを変えなくてはなりません。 圧倒的に引き出しが足りない……！ ということで、今回は文字装飾の基本のパターンについて、LIGブログのアイキャッチを参考例に挙げながらまとめてみることにしました！ 現場で活かせるWebデザインを勉強するなら…… Webデザインを徹底的に

13の質問に答えるだけで、髪質に応じたオーダーメイドシャンプー＆トリートメント【メデュラ】をお届け。1つに絞れない髪の悩みに、あなた専用ヘアケアを。自分らしく生きる女性を応援するあなただけの HAIR CARE “MEDULLA”