Reflective UI実践：現実世界が映り込むUI表現｜usagimaru
Reflective UIと呼ばれる表現がにわかに注目されています。そのいくつかの事例紹介や、私自身が実際に実装してみてどうだったかの所感を書き留めておこうと思います。 Reflective UIとはReflective UIとは、光や映像の反射表現を活用してUIの質感を高めた表現を指します。ジャイロや加速度センサーを使って擬似的に反射を表現したり、カメラで取り込んだ映像をUIのテクスチャとして活用して、より現実感を持たせた表現などがあります。 カメラを使う場合、例えばフロントカメラでユーザーの顔や背後の映像を撮影しリアルタイムに加工して、テクスチャとしてUIの見た目に反映します。これがスマートフォンで実装されるとまるでGUIが鏡のように映り込む質感を持った物体かのように錯覚するので、「クールな新しい表現」として注目されています。 Reflective UIに明確な分類や定義があるかは定か
Progressive blur効果を用いたUI表現｜usagimaru
Progressive blur（プログレッシブ・ブラー）というのは、少し前からにわかに流行り出しているUIのスタイリングに関する表現の一つです。Variable blur（可変ブラー）、Gradient blur（グラデーション・ブラー）と呼ぶこともあります。その見た目は通常のブラー効果（ぼかし、ガウスブラー）とは少し異なります。このアーティクルでは、UIにおけるProgressive blur（またはVariable blur）の概要とAppleプラットフォームでの技術検証を紹介しつつ、後半では簡単な経緯やデザインとしての考慮事項を解説します。 例えば次のイメージはProgressive blurの例です。通常のボカシ表現とどこが違うのかわかりますか？ Progressive blur（プログレッシブ・ブラー）の例 Gaussian blur vs. Progressive blurわ
デジタル庁のサイトやばすぎるwww - Qiita
はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォントもNoto Sans JPを使われててとても読みやすい。黒も #000 でなく見やすい色になっている。 やばいですねこれ。 そしてこのレイアウトを見たとき、余白のおかげでとても見やすいなと思いました。そこでChrome Dev Toolでレイアウトを見てみ
line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 | Yuya Kinoshita
line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 Webサイトのコーディング（実装）では、デザインデータ通りの数値を反映しているにも関わらず、ブラウザ上の表示がデザインデータと比べてずれる（余白が大きくなりすぎる）場合があります。 これはブラウザのline-heightの仕様によるものですが、line-height制御の難しさがデザインデータとコーディング後（ブラウザ表示）の余白のずれにつながっていると考えています。 この問題を解決するため、line-heightの不要な上下の余白を打ち消すCSSを試したところ効果を実感できたので、この方法のメリット・デメリットや活用についてまとめました。 チームで進めている実際のプロジェクトでこの方法を試してから、2020年1月の時点で9ヶ月ほど経ちますが、メリットとデメリットを比較してメリットが完
human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)
ヒューマンピクトグラム2.0は、非常口のあの人のピクトグラムをTopeconHeroesダーヤマの好みで拡張、ストックしていくページです。 このサイトにストックしたピクトグラムは、WEB制作や会議の資料、企画書などのデザイン素材として無料で利用可能です。 ただし素材そのものの再配布、販売はNGっす。なお2.0だからって拡張元のピクトグラムに比べ優れている訳ではありません。 犬の散歩のピクトグラムその３ 飛び膝蹴り 社長、部長 ショートカット 手荷物検査 略奪婚 結婚式のピクトグラム 神父、牧師 ちゃぶ台返し 2 水球 ピクトグラム シンデレラ サムライ 3 サンタクロース 2 サンタクロース バーテンダーのピクトグラム2 バーテンダー 銅鑼 銅鑼をドーン 虫取り少年 少年時代 やり投げ 食事をするピクトさん 演説するピクトさん エスカレーター 下校する子供
日本のWebデザインで見かける10個の特徴
ここ数年で、日本のWebデザインは大きく進化しました。 洗練されたデザインといえば、海外のものでしたが、今では日本でも数多く見られます。 デザインのスタイル、芸術的アプローチ、高度なソリューション、そして漢字や縦書きの文字を使ったデザインなど、日本のWebデザインで見かける10個の特徴を紹介します。 10 Distinctive Features of Japanese-Style Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ハイテクな演出 02. 他とは異なるソリューション 03. 日本独自の配色 04. 縦書き 05. 自然の風景 06. 巧妙なヒーローエリア 07. アニメに影響を受けたイラスト 08. キャラクター 09. 日本の漢字 10. 日本の伝統的な音 01. ハイテクな演出 W
矢印のシンプルなデザインが豊富に揃ってる！商用利用無料、使い勝手がいい矢印・アローのアイコン素材
Icons8で販売されている有料のアイコン素材をオーナー様のご厚意により、当ブログ限定で無料で配布します。 今回は、矢印のシンプルなデザインが豊富に揃った、使い勝手がいい矢印・アローのアイコン素材です。
Design Sprint ガイドブック v2
スタートアップを始める前に知っておくべき、スタートアップの反直観的な事柄やスタートアップの逆説についてまとめました。Paul Graham と Peter Thiel の言説を振り返りたいときにどうぞ。※ 6/30 に東京大学のアントレプレナー道場で話した内容です。 1.不合理なアイデアこそが合理的 2.良いアイデアは説明しづらい 3.難しい課題のほうが実は簡単 4.良いプロダクトの機能は少ない 5.多数のLike より少数のLove を 6.スタートアップのアイデアを考えてはいけない 7.競争は敗者の戦略—独占せよ 8.小さな市場から始める 9.スケールしないことをしよう 10.チームに多様性はいらない 11.会社化すると良くない 12.スタートアップに関する知識はいらない 13.やりたいことはやってみないと分からない ＋逆説のベンチャー投資
パワポ資料にデザイン革命を。クリエイティブなプレゼンを行うためのスライドライブラリー – Social Design News
パワポで資料を作る際、スマートアート機能に不満を抱く人は少なくない。もっと多様にかっこよく資料をデザインできたらいいのに…という思いを抱く人は多いはずだ。 「SlidesCamp」は、そんな不満を解消してくれる。クリエイティブなスライドが1000以上用意されており、それを誰もが簡単にダウンロード、カスタマイズして利用することができる。 かっこいい図表やマップ、エクセルチャートやアイコン、インフォグラフなどが用意されている。 価格は１スライドで２ドル、もしくは30スライドで30ドル。あるいは年290ドル払えば使い放題での利用が可能だ。パワポを多様する人にとっては、仕事のレベルを１段上げるために重要な選択肢となってくれそうだ。 SlidesCamp : Web / Facebook ※「ビジネスモデル2025」が５刷に突入！ 【参考】 ・【BBM】『ビジネスモデル2025』長沼博之・著 vol
非デザイナーがWebサイトをおしゃれに作るためにやったこと - Qiita
はじめに 普段はバックエンドエンジニアでデザインの勉強を一切やったことがない僕がそこそこのwebサイトであれば作れるようになってきたので、webサイトをおしゃれに作るためにやったことをまとめてみました。 手順 デザインについて無知でhtml, cssをほとんど書いたことない人（基本的な文法は知っている。）がいきなりおしゃれなサイトが作れるようにはなりません。以下のステップを踏んでいくといいと思います。 おしゃれなサイトを探して研究する。 bootstrapを使ってサイトを作ってみる。 実際に作ってみる。 おしゃれなサイトを探して研究する 個人的にこれをやることがおしゃれなwebサイトを作るための一番の近道だと思います。まずは既存のものを真似して作っていくことが大切だと思うので、なぜそのサイトがおしゃれなのか調べ尽くします。 この作業を繰り返しすることでどんなサイトがおしゃれなのかわかってき
サイバーエージェント、アプリ開発で新職種 - 日本経済新聞
サイバーエージェントは2016年1月、プログラミングとデザインの両方ができる「テクニカルクリエイター」という職種を新設する。スマートフォン向けにデザインがよく操作性に優れたサービスの開発を担う。大手IT（情報技術）企業では珍しい取り組みで、既存の社員の育成と併せ、17年3月卒の新卒で約10人の採用を目指す。ゲームや音楽配信などのアプリ
プレゼン資料の表現力が増す！ビジネス用途に使いやすいフリーアイコン（×331個）のご紹介 ｜プレゼンデザイン
この記事は2015年11月09日時点の情報に基づいて書かれています。情報が一部古くなっている場合があるためご注意ください。 プレゼン資料の表現の幅を広げるうえで、あると便利なのがアイコンです。しかし、資料作成の途中でアイコンを探すのに手間どったり、必要な種類がそろわず色や形がちぐはぐになってしまった経験はありませんか？今回紹介するアイコンは数が豊富（331個）なうえ、大きさや色も自由に変更可能。幅広い用途をカバーできること間違いありません！ 実力派アイコンの「iconSweets2」を パワーポイント向けにコンバートしました さて、今回ご紹介するアイコンですが、ウェブデザインに関わる方ならどこかで見覚えがあるかもしれません。ソースは、”Yummygum（http://yummygum.com）”という海外のデザインスタジオがリリースした「iconSweets2」というアイコン集で、これをパ
よくわかる、なぜ「五輪とリエージュのロゴは似てない」と考えるデザイナーが多いのか？（深津貴之） - 個人 - Yahoo!ニュース
大きなトラブルとなった五輪のロゴ類似問題。素人目にはそっくりになロゴに対し、審査員をはじめ多くのデザイナー達が「まったく違う」と反論していたのが印象的でした。しかし、不透明かつ説明不足の審査委員会もあいまって、残念ながらこれらの発言は身内を守るものと解釈されてしまいました。また画像の盗用問題により、本来なら行われるべきだった、冷静な議論などは完全に失われてしまいました。 なぜデザイナーと世間において、これほど大きな認識の違いが生まれたのでしょうか？本稿では、デザイナーと世間の間にある「類似性のギャップ」に関しできる限りわかりやすく説明します。最大公約数的な意見としては、このような感じではないかと思います。 全体の構成としては、まず類似性は鑑賞者の文化背景に依存することを説明します。その上で、前提知識として、デザインの本質や、文字を用いたデザインの類似性についての基礎知識を解説します。その後
月刊『美術手帖』 最新のアート＆アーティスト情報・展覧会情報・評論を掲載
図工・美術系の卸売業者として60年以上の経験を持ち、画材や美術用品を国内外から幅広く提供しております。高品質な商品をお客様にお届けし、人々の創作活動を支えることをミッションとしています。教育機関との協働によるワークショップの開催など、アートコミュニティへの貢献も積極的に行っており、お客様の創作活動の輪を広げるために日々活動しております。
お値段28億ドル、Slack 「秘伝のタレ」
「で、Slack はどうしてあんなにうまくいってるの？何かしら特別なこと、したんでしょ？」車載の Bluetooth スピーカーから声が響く。「なんであれ、彼らにしたのと同じことをして欲しいんだ。」電話で話していたのは、見込みクライアントである有名 SaaS プロバイダーの CEO。自社製品デザインの見直しをうちに頼みたいらしい。上述のような質問を受けたので、これまでに数えきれないほど繰り返してきた説明を彼にもすることにした。 実際のところ、過去一年間、毎日この質問をクライアントや投資家、デザイナー仲間から受けてきた。みんな「Slack 大成功の秘密」をなんとか探ろうとしていたわけだ。Slack は今ではすっかり世間を取り込んでしまったかのように思える。評価額は圧巻の28億ドル、何十万ものユーザー数をほこり、常識はずれの速度で成長中だ。 Slack に関する質問がどうして僕のところに来るか
DevOOPS - 多数のパターンを用意したBootstrap管理画面
デザインでシステムの品質が決まるわけではありません。しかし、それでも全くデザインされていないシステムよりも見た目が整っている方が安心して使えるでしょう。それは管理画面でも同様です。 通常、管理画面は利用者が限定的なため、デザインが適当になってしまいます。そんな寂しい管理画面もDevOOPSを使えば一気に見た目が向上するでしょう。 DevOOPSの使い方 DevOOPSには多くのテンプレートが用意されています。これらを組み合わせるだけで格好良い管理画面ができあがりそうです。Bootstrapベースなので、カスタマイズもそれほど難しくはないと思います。 DevOOPSはHTML5/JavaScript製、GPL v3のオープンソース・ソフトウェアです。 devoopsme/devoops
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Midjourney
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
http://www.smaroomch.net/web-design-10/
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
