柿元崇利 / U-NEXT @tKackey 「良い」「悪い」、はいったん置いておいて、日本のウェブデザインが北米主導のものといかに異なっているか、を明らかにしたデータ解析に基づく論考(英語)。 まだ全文目を通せていないけど、とてつもない力作で内容が興味深すぎるな。 sabrinas.space pic.twitter.com/RHdM9ECRyd 2023-01-24 14:19:53
この記事では、フォトショップをつかって、チカチカと点滅するネオンライトのアニメーションを作成します。 無料デザイン素材を利用することで、誰でもリアルなネオンエフェクトを表現できるスグレモノです。 豊富なオプションがあるぶん、使い方がすこしややこしかったので、詳しく見ていきましょう。 このチュートリアルを進めることで、以下のようなネオンアニメーションを、手軽にデザインできます。 ワンランク上のネオンライトのつくり方と一緒に活用するのがおすすめ。 ネオンアニメーションに必要なもの このチュートリアルでは、無料デザイン素材 Animated Neon Font を用い、フォトショップで作成していきます。
概要 「Nu みちしるべ」は、日本の道路標識に基づいて作ったフォントです。標識の数字に興味を持ったのが切っ掛けで作りましたが、数字だけだとフォントとしてあまり面白くないので、周りの赤い円を含めて自動的に組み立てられるように作り込んでみました。道路標識の全種に対応しているわけではないです。用途は…何かあるでしょうか。 標識を自動的に組み立てるには、アプリケーションが OpenType‐フォントの高度な機能に対応している必要があります。非対応のアプリしか持っていない場合、手動で画像編集をして部品を組み立てる事になりますが、その部品としてフォントを利用できます。 ウエブブラウザーも今のところ対応状況が微妙なので、次の見本は崩れて表示されてしまうかも知れません。「直接編集」や「自動着色」を切り替えてみると表示が改善する場合があるようです。(なお「直接編集」を無効にした場合、文字列の書き替えは左上の
株式会社estieでデザイナーをしている荒井謙(@rakenarai)です。社内ではもっぱらあらけんと呼ばれています。 estieが開発・運営しているサービスのデザイン全般とフロントエンドの実装を担当しています。 趣味はラジオを聞くことで、ハライチのターンとおぎやはぎのめがねびいきのヘビーリスナーです。ラジオメールを送るレベルで好きです。 このブログで書くこと 2020年度のグッドデザイン賞に応募して落ちちゃったことを提出資料とともに振り返ります。 今年の受賞作品は2020/10/1(木)に公開されていますので以下のページでご確認いただけます。 www.g-mark.org わざわざ落選したことを公開するのはメリットないしダサいし若干の抵抗がありましたが、提出資料を作っている時に公式情報以外で参考になる情報が見つからず、手探り状態が辛かったのでGIVEの精神で書きます笑 公式ページでは今年
1983年徳島県生まれ。大阪在住。散歩が趣味の組込エンジニア。エアコンの配管や室外機のある風景など、普段着の街を見るのが好き。日常的すぎて誰も気にしないようなモノに気付いていきたい。(動画インタビュー) 前の記事:最新家電にカバーをかけて昭和感をだす > 個人サイト NEKOPLA Tumblr こだわりポイントを探す 人工物を作っているのは、言わずもがな人間である。その辺に存在するどんなに些細な物にだって、必ず制作者がいる。街の風景を形づくっているのは、各人が膨大な時間をかけて生み出してきた作品たちなのだ。 そのなかでも、特に制作者の思いが透けてみえる物件がある。私はそういう物件を愛している。 駐車禁止の看板を、ここまで作り込む必要は全くないだろう。「特に月木曜」という、蛇足にも思える追記が律儀さを加速させている 穴埋めクイズの正解はストリートビューを見れば分かるが、■と●の塗り分け方に
初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみようと思い、初めてnoteに投稿してみました。 はじめに集めたサイトの数は全部で70個。自分の仕事の参考のために集めたものなのでほとんどがBtoB向けサイトです。(BtoC向けサイトだと、この構図一覧もまた、全然違うものになりそうだなと思う。) 構図の名前は、なんとなく自分なりに語呂がいい名前をつけているだけなので、あまり突っ込まずふんわり流していただけると幸いです。(もしこの構図の正式名称とかあった
谁向云端着此亭,檐前树木映窗棂。 (image from 中国窗棂) The traditional Chinese window lattice has a symmetrical beauty, as well as a very beautiful formal name -- 窗棂. As a CSS lover, I've always wanted to draw them with CSS by hand. But that's never being easy. I thought using SVG might be much straightforward until I learned how to apply the -webkit-box-reflect property. The property Unfortunately, -webkit-box-refle
デザイナーのアイデアを、立体的に展開したリアルな実用イメージで見てみたい。そんなときは、置き換えるだけで、撮影したような本物そっくりな仕上がりで演出できる、Photoshopモックアップ素材を利用してましょう。 今回は、デザイナーなら持っておくと重宝する、PSDファイル形式の高品質モックアップ素材をまとめてご紹介します。 プレゼン資料はもちろん、ブランディングやアイデア出し、クライアントやチームでのイメージ共有などに役立つ、世界基準の無料アイテムが揃っています。モックアップPSDの詳しい使い方はこちらのページを参考にどうぞ。 モックアップでデザイン力を上げる!手軽で無料のPSDファイル50選 リアルな仕上がりは感動モノ!すごいPhotoshopモックアップまとめ Vector Mockups Library iPadやiPhone、Macbookなどを4つのシンプルなスタイルで、86種類の
売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい! コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限
テーマパークに遊びに行くと、「古めかしく作ってあるもの」を見ることが多い。たとえば西部劇に出てきそうな雰囲気をリアルに再現したアトラクションの中に入ると、吊り下げられたランプだとか、ドアの取っ手だとか、そういうものがちゃんと大昔からそこにあるように錆びついた色合いになっている。 でも、当たり前だけどあれはその時代からそこにあったわけではなく、ピカピカの新品をその時代のものっぽく加工してあるのだ。 新品を古めかしく見せる塗装技術を「エイジング」というらしい。「アンチエイジング」じゃなくて「エイジング」。時間を一気に進ませる技術なのだ。 その「エイジング」の仕事をしていた友達がいる。どのような現場で働いていて、どんな技術やノウハウがそこにあるのか、気になったので話を聞いてみた。
When I started this blog, way back in 2006, I had no clue how long it would last. I actually had no idea I could even write about something for more than a couple of days. It is funny how things go. Once I read in a book that the secret of happiness was low expectations. That explains why, for over a decade, I have been running this site. It also explains why you might end up on this page. Not los
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか? 統計によると、「アメリカの成人の58%」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100%の明度であり、黒は0%の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を
街なかにある看板や広告、何気なく読んでいる雑誌など、あらゆるデザインの現場で使われているPhotoshop。「これどうやって作るの?」と思わず言いたくなる、魔法のようなデザインテクニックを披露しているチュートリアルで、スキルアップを目指してみませんか。 今回はデザイナーが参考にしたい、最新 Photoshop チュートリアルをまとめてご紹介します。デモ用 PSD ファイルを無料ダウンロードできる素材もあるので、これからフォトショップをはじめるひとにもオススメです。 Photoshopの使い方を知ろう!参考にしたい新作チュートリアル、作り方34個まとめ 2018年5月度 Photoshopってすごい!どうやって作った?を解決するチュートリアルつくり方まとめ 怪しくぼんやりと輝くネオン風テキぽストエフェクトの作り方 筆ブラシでペイントしたようなフォントに、鮮やかな配色を利用し、ぼかしエフェクト
デザインで悩んだ時には、新鮮なアイデアに触れてみると良いインスピレーションに繋がります。最近のWebサイトで見かけるデザインのアイデアを紹介します。 今まで使用されてたデザインのトレンドにも一手間加えられて、より使いやすく、洗練されたものになっています。 3 Essential Design Trends, May 2018 3 Essential Design Trends, June 2018 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スクリーンいっぱいの写真画像 分割スクリーンの新しい考え方 透明度を抑えたカラーオーバーレイ ナビゲーションの小型化 注意を引き付けるカットアウトとレイヤー 早回しの動画 スクリーンいっぱいの写真画像 ヒーローイメージは、スクリーンいっぱいの写真画像でさらに大きくなっています。新しい重要
リンク connpass UI Crunch #13 娯楽のUI - by Nintendo - (2018/04/27 19:00〜) ## “娯楽”を追求する、UIデザイナーの仕事とは 私たちは日々、実用品と娯楽品に囲まれて生活しています。どちらも生活に大切なもの。 今回は"もっと便利に"を追求するのではなく、"もっと楽しく"を追求する、UIデザイナー3名を任天堂からお迎えし、「Splatoon」 や「Nintendo みまもり Switch」 などの事例を交えながらお話いただきます。 子どもから大人まで楽しめる娯楽の裏側には、どのような想いや工夫があるのか。 みなさんと一緒に学べる機会になればと思います。 また、後 59 users 1621 UI Crunch @ui_crunch 「娯楽のUI」、開場しました!19:30より、任天堂さんのUI/UXデザイナーさんにご登壇いただきま
はじめに 「AndroidはiOSと同じデザインで!」と言われてどう実装しようか悩んでる方向けの記事です。 Androidアプリを作るなら当然マテリアルデザインガイドラインに合わせて1から画面設計するのが最高なんですが、そうはいかないことが経験上多いので対応案をざっくりまとめました。 諸注意 これは「iOSとAndroidのUI対応一覧」ではありません。 iOSとAndroidで同じような見た目のUI部品でも作られた経緯や目的は違うので、比較して置き換えるようなことは基本的にできないと思います。 とはいえなんの指標もないと辛いので、ここでは「iOSのこのUIをAndroidで代用できるのはこれかもね」くらいのニュアンスで列挙しています。 必ずしもどのアプリにも言えるようなことではないので、あくまでたたき台と思ってください。 「なぜAndroidらしくする必要があるのか」についてはこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く