UIデザインで中央配置がずれてしまう理由と解決方法
UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。 Hardest Problem in Computer Science: Centering Things by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントにおける中央揃え line-heightにおける中央揃え アイコンにおける中央揃え アイコンフォントにおける中央揃え 中央配置がずれているのは、スキルの問題 水平方向の中央揃え
４年間、7色だけでUIをデザインし続けた話｜コウノ アスヤ
2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。 漫画アプリ「GANMA!」漫画アプリGANMA!僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナルの作品ですと、最近アニメ化された山田くんとLv999の恋をするなどが有名でしょうか。作品自体はいろんな漫画アプリで読めますが、原作はGANMA!発。最新話が最速で読めるのもGANMA!だけです。 GANMA!のデザイナーはずっと僕1人だけなので、僕の思想や判断がけっこう大きめにデザインに反映される
Midjourneyを１年間使って見つけた、Webデザインに使えるプロンプト全ガイド
「どうすればAIをWebデザインに活用できるだろう」 人工知能AIがこれだけ話題になったいま、Webやグラフィックデザイン、イラストやゲームなどクリエイティブな業務をこなす人なら、一度は考えたことがあるかもしれません。 答えのひとつはずばり、Midjourneyなどの画像生成AIでイメージを具現化すること。 しかし、そうは言っても入力できるプロンプトは無限にあり、実際にどのように入力すれば最高の結果を得ることができるのか、すべて調べるのはあまりにも大変です。 そこでこの記事では、Midjourneyを１年間使い続けて見つけた、Webデザインに使えるMidjourneyプロンプト、小技テクニックをまとめてご紹介します。 具体的なサンプル例とプロンプトを一緒に記載しており、コピペでそのまま利用できます。 「Midjourneyって何？」というひとは、基本の使い方をまとめた以下のガイドを参考にど
デジタル庁のサイトはいつからやばかったか - Qiita
デジタル庁のサイトがやばすぎるようだ こちらの記事が話題になっています。 省庁のサイトといえば枯れ果てた技術とデザインという印象ですが、デジタル庁はさすが新しい技術をキャッチアップしていて、しかも動作も軽快で素晴らしい！と 「いい意味でやばい」 という内容でした。 こちらは、サイトスピードの観点から考察してみたアンサー的な記事となります。 デジタル庁サイトは2022年4月に刷新された模様 GoogleはChromeユーザーから世界中のWebサイトのスピードに関する情報を収集しており(Chrome UX Report)、パブリックに公開されています。 これによると、デジタル庁サイトのスピードは2022年4月に急激に改善されています。 例えばLCPの75パーセンタイルはこのように推移しており、2022年4月に半分以下の時間に改善されています。 この間に何があったのかな？ということで、Inter
AIは色を〈理解〉しているか？ アートディレクターが「ChatGPT」に配色を提案させてみた
対話型AIの話題が尽きない。火付け役となったのは「ChatGPT」だ。質問や指示を投げかけると、AIが回答を生成する。デザインでの活用も可能だろうか。サントリー『特茶』のロゴデザインなどを手がけたアートディレクター小杉幸一氏が、「ChatGPT」にディレクションをしてみた。 AIのお手並み拝見 小杉 「色」は、商品やサービス、企業ブランドなどの〈コミュニケーション人格〉を構成する重要な要素のひとつです。〈コミュニケーション人格〉とは、ターゲットとなる生活者と関係を築くための、ブランド側の〈人格〉のことです。 コミュニケーションする側の商品やサービス、企業ブランドはどんな〈人〉なのか。ターゲットとする人たちに話しかけたとき、ちゃんと聞いてもらえる人格はどのようなものかを考えるところから、デザインは始まります。 「ChatGPT」とは 「ChatGPT」は入力した質問や指示などに対して回答とな
ベイク チーズタルト | BAKE CHEESE TART
オリジナルブレンドのクリームチーズを使ったフワフワ食感のムース。クリーミーな味わいと爽やかな酸味、ほのかな塩味が口いっぱいに広がります。
Web Content Accessibility Guidelines (WCAG) 2.0
【注意】 この文書は、2008 年 12 月 11 日付の W3C 勧告「WCAG 2.0」 (原文は英語)を、情報通信アクセス協議会の「ウェブアクセシビリティ基盤委員会 (WAIC)」が翻訳と修正をおこなって公開しているものです。この文書の正式版は、あくまで W3C のサイト内にある英語版であり、この文書には翻訳上の間違い、あるいは不適切な表現が含まれている可能性がありますのでご注意ください。 【注意】この文書にはより新しいバージョンが存在します: Web Content Accessibility Guidelines (WCAG) 2.1 W3C 勧告 2008 年 12 月 11 日このバージョン: http://www.w3.org/TR/2008/REC-WCAG20-20081211/ 最新バージョン:http://www.w3.org/TR/WCAG20/前のバージョン:
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
【トレンド分析】最近のアイコンのデザインが似通ってきている問題 デザイン会社 ビートラックス: ブログ
最近のスタートアップにおけるロゴトレンドでは、そのスタイルに多くの類似性があることがわかった。その中でも、特にスマホ向けのアプリの影響でアイコンの存在がそのブランドを強く印象づける役割を果たしている。 【トレンド分析】最近のロゴデザインが似通ってきている問題 – 第2弾 多くのアイコンがどんどんカラフルに限られたスペースに複数のアイコンが並ぶスマホのホーム画面で存在感を出すためなのか、最近のアイコンはどんどんカラフルになってきている。これは、画面の解像度が上がってきている恩恵でもあるが、どんどん没個性にもつながっている。 カラフルアイコンの代表的なのがインスタグラム。インスタは2016年にそれまでのカメラ風のアイコンから、思い切ってカラフルなグラデーションを取り入れたアイコンにリデザインを行った。 Googleサービスの見分けをつけるのが難易度高めカラフルなカラースキームの代表といえばGo
100 DAYS OF POETRY
100 DAYS OF POETRY is an artwork, which consists of a graphic design Notty created per day for 100 days. These 100 days were also the days when he faced his own complexes and frustrations. He thought he could get closer to his ideal self by doing this project. He did not create each work as a separate piece of art, but instead expressed his feelings and thoughts as 100 graphics as if he were writi
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
無料でアニメーションバナーも作れる超有能ツール！Google Web Designerの基本｜アナグラム株式会社
皆さんはバナー作成の際、どのようなツールを使用していますか？PhotoshopやIllustrator等の有料のグラフィックデザインソフトは、社内に導入していないケースやデザインの技術がなく利用していない人も多いのではないでしょうか。 フリー素材サイトでダウンロードした画像をリサイズし入稿するのも良いですが、テキストを一文加えるだけで印象が変わり、アニメーションを加えることで広告をより目立たせることができます。 2016年6月にFlash形式のディスプレイ広告がGoogle アドワーズへアップロードできなくなり、2017年1月以降Flash形式のディスプレイ広告が廃止されました。Flash形式と同じく動きのある広告は、HTML5広告を利用することが推奨されています。Google Web Designerでは工数もかけずにGoogle ディスプレイネットワークキャンペーン向けのHTML5広告
【保存版】デザインを学ぶすべての人に贈る、配色アイデア見本101選
配色は、デザインにおける重要な要素のひとつです。この記事では、デザインプロジェクトの参考にしたい、最新の色の組み組み合わせ101種類をご紹介します。 配色は、どんなデザインでも見る人の認識を形成しながら、雰囲気やトーンを設定します。単色や明るい、涼しい、暖かい、または補色であれ、すべての色合いがデザインの役割を果たします。 デザインに適した色を見つける作業は難しいことです。そこで、配色の参考にしたい101種類の色の組み合わせをまとめています。各カラーパレットは、Shutterstockのイメージ画像にインスパイアされており、HEXコードも一緒に記載しているので、ウェブデザインやソーシャルメディア広告、Eメールデザインなど幅広く利用できます。 コンテンツ目次 1. 単色系カラーパレット 2. 寒色系カラーパレット 3. 鮮やかなカラーパレット 4. 暖色系カラーパレット 5. 補色系カラーパ
2017年に注目されたインターフェイスデザインのトレンドを解説
2017年はインターフェイスデザインにとって多様性の一年でした。中でもユーザーフレンドリーに注目された年と言えるでしょう。 2018年これからのWebサイト、スマホアプリのデザインで押さえておきたいインターフェイスデザインのトレンドを紹介します。 Review of Popular Interface Design Trends in 2017 by Marina Yalanska 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 機能的なミニマリズム ブルータリズム 画像に統合されたタイポグラフィ アニメーションするヒーローイメージ オリジナルのイラスト 枠線がないレイアウト さまざまなインターフェースのアニメーション UIに優しいブランディング 単色のUI 進化した暗い背景の使い方 文字を読ませるためのスペース コントラストを
スパムメールから収集したテキスト装飾 : mwSoft blog
先日、我が家の捨てアドを久々に開いたら、数千件のスパムメールが溜まっていることに気づいた。 オオアリクイみたいなセンスの良いスパムがないかなぁと思って軽く見てみたが、残念ながら良質な内容は見当たらなかった。 ただ、見ていると、テキスト装飾が凝ったものが多くて感心した。 仕事でも情報をテキストで残すことがあるけど、そんな時にちょっと見やすくするのに使えるのではないかと思って収集してみた。 ============================================================ ************************************************************ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ----------------------------------------------------
2018年用、日本語のフリーフォント332種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
個人でも商用でも無料利用できる、日本語のフリーフォント332種類を紹介します（公開時より、3+18個増えました）。 ビジネスからプライベートまで、幅広く利用できる無料フォントが満載です！ 去年は260種類だったので、今年は大幅に増えています。 中には、配布先が変更されたフォント、配布終了になってしまったフォント、無料でなくなったフォント、ライセンスが変更されたフォントもいくつかあります。 最新版を公開！フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も確認しました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RandomA11y - Endless collection of accessible color combos
WCAG - Contrast Checker
http://ideahacker.net/2015/02/14/9779/
