中学生が「UIの正しい背景色の決め方」を考えてみた
中学生を名乗れるのも残りわずかということで、記念に（記念に？）なにか残しておこうと思います。 本当はフロントエンド関連で書こうと思っていたのですが、半年近くコードを書いていなかったのと（言い訳）、そもそも僕の技術関連の知識のほとんどは既に知られていることばかりだと思ってしまった（勉強してください..）わけですが、UIならなんとか語れる気がします。 この記事について 僕がUIを作る際の感覚的なマイルールを言語化してみました。 この記事の内容は僕の蓄えてきた感覚だとか直感を基にして書いているので、一般的な考えと合わないところがあるかもしれません。そういうときはぜひコメントで指摘してください。 色の決め方 さて、本題です。UIを構成する要素は、余白、大きさ、構成、... とまあ様々です。そして「色」はこれらの中でもトップレベルで重要な要素ではないでしょうか。例えば、背景色の小さな違いでも画面全体
How To Center a Div
IntroductionFor a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we've been granted more and more tools we can use to solve this problem. These days, we're spoiled for choice! I decided to create this tutorial to help you understand the trade-offs between different approaches, and to give you an arsenal of strategies you can use, to han
「のどが渇いた」というユーザーに何を出す？ ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
2022年9月13日 株式会社メンバーズ ポップインサイトカンパニーでのウェビナーのスライドです。「ユーザーが欲しいと言った機能をつけたのに使われない！」という経験はありませんか。プロダクトをつくるとき「ユーザーの心理を理解しよう」とよく言われます。しかし、ユーザーに言われたままやることと、ユーザーが本当に望んでいることは異なります。「UXデザイン・UXリサーチ」は、ユーザーを理解するための専門技術です。ユーザーインタビューやユーザビリティテストを用いてファクトを集めることで、ユーザーの表面的な言葉に惑わされない、本当のインサイトにたどりつくことができます。かんたんなワークも交えながら、体系的に解説いたします。Read less
UIデザインの最近のトレンド、近未来的なかっこいいグラデーションを実装するCSSのテクニック
近未来的なかっこいい印象を与えるグラデーションを使用した、テキスト・ボタン・背景のスタイルを実装するCSSのテクニックを紹介します。 白地のテキストをわずかに輝かせたり、ダークモードに映えるグラデーションでテキストやボタンを目立たせたり、カードに美しいグラデーションの背景を実装したり、少し色味を変えてライトモードに使用してもかっこいいグラデーションです。 CSS Tricks to Create that Dark Futuristic Web3 Look by Trisha Lim 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに かっこいいグラデーション使用したテキストのスタイル かっこいいグラデーション使用したボタンのスタイル かっこいいグラデーション使用した背景のスタイル はじめに ダークモードのWeb3の美しさ
ご報告とお詫び 「Qiita」「Qiita Jobs」におけるユーザー情報の取り扱い不備について - Qiita株式会社
ご報告とお詫び 「Qiita」「Qiita Jobs」におけるユーザー情報の取り扱い不備について各位 Increments株式会社（本社：東京都港区、代表取締役社長：柴田健介、以下「弊社」）の運営するプログラマー向け情報共有サービスQiitaのユーザーページ（以下「ユーザーページ」）において、本年3月25日にリリースした新機能に関し、Qiitaのユーザー様をはじめとする皆様にご心配・ご迷惑をおかけし、誠に申し訳ございません。 本件の事実関係については、弊社内で調査を進める中でQiita Blogにおいてもお知らせしておりましたが、事実関係の確認を行った結果につきまして、判明した事実を改めてご報告いたします。 本年3月25日にリリースした新機能は、ユーザーページにおいて、ユーザー様が閲覧されたQiita内の記事に付されたタグのうち出現割合が高かったもの上位5つ及びその割合を、「読んだ記事」と
クソ酷いウェブサイト
他に何がほしいってんだ、クソ野郎 お前はウェブサイトを作ってその糞サイトを最高だと思ってるんだろ？ お前は13MBに及ぶパララックスエフェクト付きのクソ重いページがアホらしいグッドデザイン賞をとるとでも思ってるんだろ？ お前は20kgあるjQueryファイルと83個のpolyfilがIE7をまともに動作させると思ってるんだろ？ どアホ、お前は間違っている。俺様が俺の考える最強のウェブページを教えてやる。 クソ軽量でクソ速いページ 全てのデバイス幅に対応できる どんなうんこブラウザでも見た目が一緒 お前のサイトに訪れるどんな糞野郎でもアクセス可能 読みやすく伝えたいことが明確（もっともお前が5MBサイズのシャレオツなコーヒー写真ではなくて伝えたいことがあればの話だがな） よく聞け、糞野郎ども お前らはハッキリ言ってオーバー・デザインだ。この史上最強のウェブサイトを見てみやがれ。俺がごみコンテ
Introducing Microsoft Edge preview builds for Windows 7, Windows 8, and Windows 8.1
Update 6/26/19: Today we released the Dev channel for previous versions of Windows, now available in addition to the Canary channel released last week. You can download both from the Microsoft Edge Insider website. Give it a try and let us know what you think using the “Send feedback” smiley, the Microsoft Edge Insider forums, or by reaching out on Twitter. Today we are excited to make preview bui
【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
Bootswatch
Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.2 Themes are built for the latest version of Bootstrap. Version 4, version 3, version 2, and other releases are also available to download.
新規決済手段導入に際し、なるべく丁寧にテストケースを作成した話 - クックパッド開発者ブログ
会員事業部の日高尚美(@natan3)です。 半年前になりますが、クックパッドでは Android ユーザ向けにプレミアムサービスの決済手段の一つとして Google Play 決済を導入しました。 ユーザに新たな機能を提供する前には、何らかの形で開発者側での検証が必要です。 Google Play 決済導入バージョンのリリースは、ユーザのお金を扱うこともあり、不具合が起きた際にサービス全体の信用に関わる、非常にリスクの高いリリースでした。 それに伴い、検証もできる限り万全に行わなければなりません。 そのため、なるべく丁寧にテストケースを作成し、それをもとに検証を実施することで新機能が期待通りに実装されていることを担保しました。 丁寧にテストケースを作成したから、というだけではもちろんありませんが、リリースから半年経った今でも Google Play 決済周りの目立った不具合はまだ見つかっ
言語切替のUIデザインについて考えてみる。｜灰色ハイジ
いま、自分のポートフォリオを英語/日本語どちらにも対応しようと思っていて、どのように切り替えるべきか、リサーチのためにいろんなサイトを見て回った。その時にこれは良い、これは避けたほうが良さそう、と気付いたことがある。 国旗を使うことによる問題 デザイン上のスペースの節約からか、あるいはグラフィカルに補助したいという理由からか、言語切替のUIで国旗を見かけることがある。 日本にいると「日本=日本語」と、国と言語が対応しているので気付きづらいのだけれど、世界はそういう風には出来ていない。例えば英語を提供する際に、どの国旗が相応しいのか考えてみよう。イギリス？アメリカ？英語を第一言語とする国はいくつもある。 決して国旗は言語を代表するものではないのだ。 また、提供する言語が多くなると、ごちゃごちゃして見づらいという問題も含んでいる。 ただし、言語の切り替えではなく、ECサイトなど提供するコンテン
Microsoft Azure: クラウド コンピューティング サービス
Azure を探索 Azure について 安全かつ将来を見据えた、オンプレミス、ハイブリッド、マルチクラウド、エッジのクラウド ソリューションについて調べる グローバル インフラストラクチャ 他のどのプロバイダーよりも多くのリージョンを備える持続可能で信頼できるクラウド インフラストラクチャについての詳細情報 クラウドの経済性 Azure の財務上および技術的に重要なガイダンスを利用して、クラウドのビジネス ケースを作成する 顧客イネーブルメント 実績のあるツール、ガイダンス、リソースを使用して、クラウド移行の明確なパスを計画する お客様事例 成功を収めたあらゆる規模と業界の企業によるイノベーションの例を参照する
2018年最新！Bootstrap良質テンプレート19選【無料/有料/日本語別】 | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト
突然ですがおしゃれなWEBサイトを作るのに欠かせない存在となってきた「Bootstrap」を知っていますか？ BootstrapとはTwitter社にて開発されたWEBサイト構築をよりスムーズかつ、スピーディーに仕上げる為のフレームワーク。 フレームワークとはCSSのスタイリングやレイアウトが既に定義されたCSSのパッケージの様なもの。 引用：無料テンプレートで爆速WEB制作！Start Bootstrapを使ってみよう！ 数年前では考えられなかったスピードでWEBサイトを作成できるようになりました。簡単に利用できる「Bootstrap対応のテンプレート」を使用する人も増えていますが、 などの悩みもでてくるのではないでしょうか？ そこで今回はおすすめの優良なBootstrapテンプレートを集めてご紹介したいと思います。無料のテンプレートもありますが、有料でも使い勝手の良いテンプレートをピッ
無料テンプレート42選 Bootstrapを使ったかっこいいHTMLテンプレートを集めてみたよ | sounansa.net
無料テンプレート42選 Bootstrapを使ったかっこいいHTMLテンプレートを集めてみたよ 最終更新日: 2019/06/27 Bootstrapも間もなくバージョン４だそうです。機能も進化して使い勝手もずいぶん良くなりました。 昔はそのデザインテイストをBootstrap臭と揶揄されたものですが、カスタマイズ性が良くなったのか、使い方が理解されるようになったのか、最近ではBootstrapを利用したWEBサイトもよく見かけます。 そして、Bootstrapを使ったデザインテンプレートもたくさん見かけるようになりました。 中には有料テンプレートに勝るとも劣らない素晴らしい無料テンプレートもたくさんあります。 今回は、Bootstrapを使ったおしゃれでかっこいい無料HTMLテンプレートを集めてみました。 以前に書いた記事で紹介した無料HTMLテンプレートの中にもBootstrap
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JRと東京メトロの運休告知のデザイン、何故あれだけわかりやすさに差が出てしまったのか？その考察がおもしろい！
https://bootstrap.build/
The Blog | Welcome to Adobe Blog
Bootstrap Panel
実践Terraform＠tmknom on Twitter: "すげーリポジトリ見つけた。Webサービスのシステム設計が学べる。日本語もある。システム設計ってどうやって学ぶのが効率いいんだろうって思ってたけど、コイツを出発点にするのはアリな気がする。 https://t.co/1YMBP9UMHo"
ピクトグラム見てるとフロッピーディスクじゃない保存アイコンに「苦戦」を感じる「FDは保存という概念」
