![https://twitter.com/pulpxstyle/status/1622928265089519618](https://cdn-ak-scissors.b.st-hatena.com/image/square/ed21d328e766f2d60a55040cd6426cd3c95ce3f1/height=288;version=1;width=512/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FFoXMp3NaEAApXEQ.jpg)
タイポグラフィーは、ブランドやサビースのブランディング、マーケティングのプロセスにおいて重要な役割を果たしてきました。ブランドのアイデンティティーを表現することができるようなグラフィックの設計がタイポグラフィーの主な役割です。 グラフィックスの大部分を構成しているのはフォントです。一種類のフォントのみで構成されたWebサイトやブログは単調で面白みのないものになってしまします。二種類、多くても三種類のフォントを組み合わせるのが確実に好評を得ることができるアイデンティティーの形成に良いでしょう。 雰囲気の全く異なるフォントを組み合わせ、デザインの価値を損ねているのをよく見かけます。以下、フォントを組み合わせる際に気をつけるべきポイントについてまとめました。 フォントの組み合わせは視覚に訴えるもので、メッセージ性があるものでなければなりません。もしそうでなければ、ページは見劣りしてしまいます。
海外デザインブログCanva Design School Blogで公開された「10 Golden Rules You Should Live by When Combining Fonts: Tips from a Designer」の著者より許可をもらい、要点をまとめて日本語抄訳しています。 デザインやアートの世界には、変えることができないいくつかのルールがあります。基本ルールを知ることで、自由にルールを壊すこともできるようになります。では、フォントの効果的な組み合わせ方はどのように学べよいでしょう。デザインとしてうまく利用できると証明されている、いくつかのガイドラインを見ていきながら、実践的なデザインの基本を学んでいきましょう。 詳細は以下から。 01. デザインに合ったフォントを選ぼう 多くのフォントはカジュアルさや、陽気さ、真面目さ、エレガントさなど、他とは異なる雰囲気(英: M
広告で集客する際にユーザーが訪問するページとしてLP(ランディングページ)があります。ユーザーがLPに訪問した際、視覚的&直感的に商品やサービスのイメージを決めて自分に必要なものか不要なものを判断します。 その一番の判断材料となるのが、ファーストビューです。今回は、LP作成時の最重要部分であるファーストビューってそもそも何なのか。また、最適なサイズについてまとめましたので、ぜひ参考にしてみてください。 1.そもそもファーストビューとは? ファーストビューは、ブラウザからLPやWEBサイトを表示した際スクロールせずに表示される部分のことを言います。そのため、画面の幅や高さはモニターサイズにより異なります。 また、LPの場合はファーストビューを見て離脱してしまうユーザーがWEBサイトに比べて高いと言われているため、非常に重要な部分なのです。 2.LPを見るモニターサイズを知ろう LPを閲覧する
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Componentのディレクトリ構成」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ! この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいてうまくいっていると感じているComponentのディレクトリ構成についてご紹介していきます。 ディレクトリ構成 Componentは src/components の中にまとめていて、その下に以下の4種類の分類ディレクトリを切っています。 src/components/page src/components/model src/components/ui src/components/functional 分類ディレクトリを考えるにあたって重視したポイントは以下。 新しくco
WebサイトやスマホアプリのUIデザインにぴったり、Figma用の高品質でシンプルにデザインされたアイコン素材を紹介します。 たとえば、アローだけでも90種類以上、ホーム・サーチ・カート・メールなども複数のデザインで用意されており、UIにぴったりなのが見つかると思います。 Figmaなので、カラーやストロークの太さなどは簡単に変更できます。 Untitled UI Icons Untitled UI Iconsは、高品質でFigma用のアイコンが見つからなかったので作成した、とのことです。 UIデザイン用にクリーンで一貫性のあるニュートラルなアイコンライブラリで、Figmaのために、Figmaで作成されています。
コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、?となってしまします。 忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。 ※色んなところから引っ張ってきているので正式名称ではない(複数呼び名がある)ものがあるかもしれませんが、ご了承ください。 UIパーツ見づらくてすみませんが、エクセルのシートを画像にしたものを貼り付けていきます Onscreen keyboards画面上にキーボードの図形や文字を表示し、マウスあるいはペンなどのポインティングデバイスや、指先によるタッチ、あるいは十字キーなどで各キーを指定して文字入力を行うもの Onscreen keyboards (iOS) SegmentedControliOS独自のUIで水平方向に配置された複数のボ
ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳
自己紹介 こんばんは。 Qiita株式会社でデザイナーをしている綿貫佳祐と言います。 現在はCX向上グループという「売上とか利益じゃなくて、ユーザーの皆さんの体験向上だけを考えよう」と掲げる部署のマネージャーをしています。 TwitterやInstagramなど、こちらのidでやっていますので、良かったらフォローしてください。 Qiita株式会社ではQiita、Qiita Team、Qiita Jobsという3つのサービスを展開しています。 今日はQiitaとQiita Jobsをまたいで提供している機能を例に出してお話をします。 本題に入る前に 現場から学ぶモデル駆動の設計というconnpassグループにおいて、デザイナーから発表するのは結構プレッシャーもあります。 今日の私の話は、エンジニアからすれば当たり前過ぎるとか、モデリングのお作法としてはあまり正確ではないとか、そういう内容も多
こんにちは、ハヤマです。 普段はPhotoshopでWebデザインを行うことが多いですが、 履修を兼ね、気になった情報を随時記事にまとめていきたいと思います。 はじめに さて今回は、Adobe XDでパスのアウトラインを取る方法についてご紹介します。 2021年6月、新しいスタイリングとして「パスのアウトライン化」が追加されました。 (英語ですが動画での紹介もあります) blog.adobe.com 今までは、必要に応じてIllustratorでアウトライン化を済ませたり、プラグインを導入するなどで対応していたのですが、ついにAdobe XDの基本操作として行うことができるようになりました。 操作方法 さっそく、パスのアウトライン方法を見ていきましょう。 ①アウトライン化するオブジェクトを選択 アウトラインをかけるオブジェクトを選択します。 ②アウトライン化 メニュー「オブジェクト」>「パ
ウェブ制作の現場で定番となってきたデザインツール「Figma」。前回の記事『デザインの管理と効率化が行える FigmaのComponents入門』では、デザインパーツの管理や柔軟な変更が可能になる「Components」機能を紹介しました。 本記事ではComponentsをまとめ、検索性を保ちつつ、さらに柔軟な変更と管理が行える「Variantsバリアンツ」を紹介します。 Variantsを使うと、複雑なコンポーネントの切り替えや管理が行いやすくなり、堅牢なデザインファイルが作成できます。また、コーディング時に近い思想でデザインを組めるので、実装時に破綻が起こりにくくなります。 Variantsは規模感に関わらず小さな単位でも活用できます。 「使いこなせていない」、「自分の制作の規模感では不要」と考えているデザイナーにも、手軽に導入できメリットを実感できるはずです。本記事で使い方を説明する
ウェブ制作の現場で接する機会が増えてきているデザインツール「Figma」。前回の記事『FigmaのAutoLayout入門 - エンジニアに伝わるデザインを作ろう』では、デザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」機能を紹介しました。 本記事ではデザインパーツの管理や柔軟な変更が可能になる「Components」について詳しく紹介します。Componentsを使い、何度も出てくる要素を管理すると、制作が効率よく進められます。 この記事は、次のような方々にオススメの内容となっています。 デザイナー 同じグラフィックをいつもコピペで複製している方 Components機能の使い方やルールに不安のある方 エンジニア デザイナーから受け取ったデザインにComponents機能が使われいて、参照方法がわからない方 コーディングで、Componentsのル
こんにちは、おとべです。ゆめみでデザイナーに社内転職して気づけば半年が経過しました。 さて、Figmaヘビーユーザーのみなさま、Auto layoutはもちろん使っていると思うのですが、Auto layoutのココ、いじったことありますか? あります。使いこなしています。という方はこの記事をTwitterに共有してそっと閉じてください。 無い!というかそんな選択しあったんか!!っていう方に向けてAuto layoutの「Space between」について紹介していきたいと思います。 Auto layoutおさらいSpace betweenの前に普通の(Packed)Auto layoutをおさらいしましょう。 FigmaのAuto layoutはフレーム内の子要素を縦横一定の向きに同じ隙間を開けて並べる機能です。その際の親要素の大きさは固定、もしくは中身の大きさに依存して可変となります。
フロントエンド開発は一般的に複雑性との戦いです。放ったらかしにしておくとますます複雑になり、変更するのが難しくなります。これまでにも、このような複雑さをどうにかして制御しようとして、Atomic Designをはじめとした様々な設計手法(デザインパターン)が考えられてきました。 しかし、React / Next.js を使ってチーム開発を行う際に、現状のデザインパターンでの運用では「どうもうまくいかないな」と思う場面に多々遭遇しました。そのような経験を踏まえて、「コンポーネントをどのように設計するか」「どのようにディレクトリを分けるか」を徹底的に考え、新しいデザインパターン「Tree Design」にまとめました。 Tree Design はまだまだ仮説段階です。今後弊社チームで運用していく中でブラッシュアップする予定です。しかし、他のフロントエンド開発チームがデザインパターンを再考する際
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer(主戦場はフロントエンド)の Kazuya です。今回は、React や Vue.js などの SPA フレームワークにおけるコンポーネント設計について紹介します。 昨今のフロントエンド開発では、コンポーネント指向での開発がスタンダート化しつつありますが、コンポーネント設計には厳格なルールが無く、どのように設計すればいいか悩む方も多いのではないでしょうか?(筆者は沼にはまりました) コンポーネントの単位はどの程度に分割すべきなのか、状態管理はどうすればいいのか、API 通信はどこですべきなのかなど、一言にコンポーネント設計と言っても考えるべき項目が多いです。チーム開発では、認識があっていないとコードが魔境になることもしばしばあると思います。(筆者の経験談より) そこで今回は、数々
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く