GitHub - boringdesigners/boring-avatars: Boring avatars is a tiny JavaScript React library that generates custom, SVG-based avatars from any username and color palette.You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
フロントエンドエンジニアがデザインできるようになると何が嬉しそうか｜seya
今年の春ぐらいから独学でデザインを練習し始めたのだが、そもそもやり始めた自分のモチベーションと、実際やってみて「こういうところがフロントエンドエンジニアとしての業務にも活きそう！」と感じたことを言語化しようと思う。 ここで言う"デザイン"とは何かはじめに、デザインと一口に言っても主語が大きいので、イメージがずれないよう具体的に述べると、いわゆるUXの5段階モデルの「表層」と「骨格」をイメージしている。 具体的なDoで言うと「実装者がUIを作る時の指針となる成果物としてのデザインを作ること」、もっとざっくり言うとFigmaなりSketchなりで本番でも使われるデザインを作ること。 思うに構造より上のレイヤーの"デザイン"はプロダクト開発に携わる人なら普段からある程度やっているのではないかと思う(もちろんかける時間の比重はデザイナーやPdMというロールを持っている人の方が多い)。 個人的にそも
CSSで美しいネオンライトのエフェクトをテキストやボタン、ボーダーに実装するテクニックのまとめ
テキストやボタン、ボーダーに美しいネオンライトのエフェクトを実装するCSSのテクニックを紹介します。 ネオンライトはCSSのtext-shadowやbox-shadowで実装されており、CSSアニメーションやJavaScriptで動きを加えるとさらに面白くなります。 各デモは「Run Pen」をクリックすると、動作します。 まずは、ネオンサインでチカチカの効果もあります。 See the Pen Flickering Neon Sign Effect using CSS Text & Box Shadow by George W. Park (@GeorgePark) on CodePen. 上記のデモは、テキスト編集もそのままできます。「OPEN」を「オープン」などに変更してみてください。 続いて、さまざまなネオンライトのエフェクト。 See the Pen Neon text-shad
CSSのスゴ技！シンプルなHTMLで実装されたボタン、グリッチエフェクトが厨二心をくすぐられるかっこよさ
CSSのtext-shadowとbox-shadow、そしてclip-pathを使用してノイズをつけ、ジジッと動かすグリッチエフェクトのボタンを紹介します。 今年もCSSの進化が楽しみですね！ CSSだけで実装されたグリッチエフェクト 実際の動作は、下記ページでご覧ください。 上のボタンだけでなく、下のボタンでもグリッチエフェクトが楽しめます。 See the Pen Pure CSS Cyberpunk 2077 Buttons 😎 by Jhey (@jh3y) on CodePen. 実装方法の解説は、下記ページから。 ボタンの基本的な形を実装するところから、詳しく解説されています。 CSS Cyberpunk 2077 Buttons 最終的な実装コードは、下記の通り。 HTMLは、思っていたよりシンプルです。 <button class="cybr-btn"> Cyber<sp
mojimo - ちょうどいい文字を、ちょうどいい価格で
mojimoとは？ ちょうどいい文字を ちょうどいい価格で 「mojimo（もじも）」は、フォントワークスが提案する、フォントの新しいサービスです。 「ちょうどいい文字を、ちょうどいい価格で」をコンセプトに、 特定の用途ごとに最適な書体、最適な価格を実現しました。 定額制プランでご提供します。 あなたにぴったりフィットする ちょうどいい書体をパックにしました 人それぞれ、目的やシーンによって、文字の表現は異なります。 表現したいことが違うのに、みんな同じフォントでは、表現の幅も狭まります。 いまあなたが作ろうとしているもの、伝えたいことに最適なフォントのみを 目的ごとにセレクトし、専用のパックにしました。 定額制で、 好きなときだけ、好きなものだけ。 これまでフォントは、「プロのためのもの」というイメージが強くありました。 mojimoは、目的に合った最適なフォントを、使いやすい価格帯でご
本当によく使うFigmaの便利ショートカット厳選36個まとめ
どんなツールもショートカットを覚えることで、制作時間の短縮、効率化を図ることができます。しかし、膨大にあるショートカットキーをすべて覚えるのはなかなか大変な作業です。 この記事では、プロトタイプツールFigmaの覚えておくと便利なショートカット機能のみ36個をサンプル例を交えてご紹介します。 これらのショートカットを一度習得してしまえば、「もっと早く知っておけばよかった！」と思ってしまう便利なものをセレクトしています。 一緒にFigmaプラグインを個別でインストールすれば、自分だけのカスタマイズ機能を追加し、より快適なデザイン作成を楽しむこともできますよ。 Figmaを最強デザインツールにする便利な無料プラグイン、ツールまとめ 2020年に注目したい人気プロトツール「Figma」のベストプラグイン厳選52個まとめ 覚えておきたいFigmaのショートカット一覧まとめ 1. レイヤーを複製する
そのユーザーファースト、本当にユーザーファーストですか？｜宇野雄 / note inc. CDO
こんにちは。クックパッド デザイン戦略本部長の宇野です。 いきなりですが「ユーザーファースト」って良い言葉ですよね。サービスのあり方の基本であり、モノづくりをしていてそれを無視したいという人はいないはず。 しかし僕はこのユーザーファーストという言葉をあまり使わず、使う際は慎重に取り扱うようにしています。この言葉の概念はとても難しいと考えているからです。 「ユーザー」って誰のこと？目の前にいるユーザーの話をそのまま取り入れれば必ず良いものが作れるの？ 答えは明確にNoです。 当然ですが無視するべきという話ではありません。ただ、向き合ってるユーザーがどんな人なのか、その人が本当に欲しているものは何なのかを徹底的に考え抜く必要があります。 お問い合わせをしてきている人はだれ？ ユーザーからのご意見やお問い合わせ、アプリストアのレビューはとてもありがたいですよね。そこから新たな改善案をもらったり、
理想のデスク環境を追い求めた話【2021年3月版】｜鈴木 潤一 / LONZ
この記事はこんな人に刺さるかも知れません🙂 ・デスクをすっきりさせるマガジンが好きな人 ・自宅のデスク環境を改善したい人 ・ガジェットが好きな人 ・スタンディングデスクが気になってる人 ・オーダー天板が気になってる人 ・ディスプレイを縦に並べてみようと思ってる人 ・MacやPCを天板裏に収納出来ないかアイデアを探している人 ・DIYが好きな人 ・ ・ ・ ・ケーブルの存在を消し去りたい人...🗑 こんにちは！ LONZ（ロンズ）という会社をやっている、鈴木と申します。 普段はWEBやアプリのデザインや設計を。週末は極たまにお寺の住職をしてます。 そして生涯現役ピンピンコロリな人生を模索しています😌 さて、ここから本題です。 2020年リモートワークの波。 デスク環境改善の無限にループにはまる♻️2020年はほぼ自宅で仕事をしていた関係で、こんなループにはまってました...（こういう人
【2023】おしゃれな配色パターンが見つかる！カラーパレット人気ツール28個まとめ | Web Design Trends
配色はデザインにおいて重要な要素の1つですが、慣れている人でないとバランスの取れた配色を決めていくのは簡単ではありません。 そこで、今回は初心者の方でもおしゃれな配色ができるカラーパレットツール・配色パターン見本サービスをまとめました。下記のように、おすすめのツールや使用する色数ごとに分類しています。 おすすめカラーパレットツール・サービス AIを使ったカラーパレットツール 2色の配色パターン見本 3色の配色パターン見本 4色の配色パターン見本 5色の配色パターン見本 その他のカラーパレットツール・サービス グラデーションの配色パターン見本 2022年に流行するWebデザインの最新トレンド10個まとめ 2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注目されています。 今回は、2022年に流
2021年に流行するWebデザインの最新トレンド12個まとめ | Web Design Trends
ついに2021年がやってきました。Webデザインのトレンドの移り変わりはとても早く、数年でトレンドがガラッと変わることもしばしばあります。必ずしもトレンドに合わせたデザインを制作する必要はありませんが、知識として押さえておくことによって、選択肢が増え、デザインの幅を広げるためのヒントとなります。 2020年はコロナウイルスの影響もあり、様々なものがオンラインに移行されたり、リモートワークが一般化するなど大きな変化の年となりました。それに合わせて、Webサイト、Webデザインの重要性も高まってきているのではないでしょうか。ぜひトレンド情報をチェックして、ご自身のWebデザイン制作に活用してみてください。 では、2021年に流行する最新のWebデザインのトレンドをご紹介していきます。 【 NEW：2022年版を公開しました 】 2022年に流行するWebデザインの最新トレンド10個まとめ 20
2021年に流行するグラフィックデザインの最新トレンド12個まとめ | Web Design Trends
2020年はコロナウイルスの影響で、これまでに経験したことの無い1年になりました。その一方で、オンラインの世界ではその影響で急速に様々な変化が生まれています。オンライン教育、オンラインショッピング、リモートワーク、娯楽など様々な分野で大きな成長を遂げることとなりました。 多くの人々、そして企業はこの変化に迅速に適応する必要があり、顧客のニーズに合わせ、テクノロジーやトレンドと共に変化しなければなりません。 トレンドやテクノロジーは成長し続けているため、第一線に居続けるためには水面下で何が起こっているのかを知っておく必要があります。 Webサイトのデザインにおいては、高速化、ユーザビリティ、セキュリティ対策、バッテリーへの配慮、ダークモードの台頭など、著しい変化がありますが、それと同様にグラフィックデザインのトレンドも大きく変化しています。 上記のような項目はWebデザインだけに当てはまるこ
デザインスプリントを導入して分かった 3 つのメリットと注意点【後編】 - Pepabo Tech Portal
Google で開発され、数々のプロジェクトを成功へと導いている「デザインスプリント」。 デザインスプリントを導入して分かった 3 つのメリットと注意点【前編】 では、「デザインスプリント」の特徴と、社内導入するに至った背景をご紹介しました。 この【後編】では、実際に導入して分かったメリットや、気をつけていることをご紹介します。 デザインスプリントの 3 つのメリット 1. アイデアが出やすい 2. チームのコミュニケーションが活性化する 3. 短期間でアイデアの価値が分かる 気をつけている 3 つのこと 1. フレームワークの本質を理解すること 2. チームやプロジェクトに合わせて最適化すること 3. 導入しやすい環境をつくること アプローチ事例 まとめ 参考書籍 & サイト デザインスプリントの 3 つのメリット ペパボには、 ハンドメイドマーケットの minne（ミンネ）、 レンタル
デザインスプリントを導入して分かった 3 つのメリットと注意点【前編】 - Pepabo Tech Portal
Google で開発され、数々のプロジェクトを成功へと導いている「デザインスプリント」。 最速で最大の成果が生み出せるメソッドとして高く評価され、Facebook や Airbnb などの有名企業でも導入されています。 ペパボでもその価値を体験するため、先日発足したデザイン戦略チームを中心に、いくつかのプロジェクトで実際に導入してみました。 この【前編】では、そんな「デザインスプリント」の特徴と、社内導入に至った背景をご紹介します。 デザインスプリントとは デザインスプリントの特徴 デザイナーのためのものではない さまざまな工夫が組み込まれている 手順が明確化されている カスタマイズできる柔軟性がある 導入に至った背景 "もっとおもしろく" したかったから 生産性をあげたかったから デザイン戦略チームができたから まとめ 参考書籍 & サイト デザインスプリントとは デザインスプリントとは
オブジェクトベースなUIデザインに取り組むための心構え｜usagimaru ⌘ Satori Maru｜note
オブジェクトベースなUIデザインの考え方が近頃注目されてきています。デザイナーとしてこれと向き合うに当たって、私なりに解釈した事柄を記しておこうと思います。 オブジェクトベースのUIとはUIデザインにオブジェクト指向の設計論を導入したものをオブジェクトベースのUI、Object-Oriented User Interfaces= OOUI などと呼ぶようです。オブジェクト指向UI、オブジェクト指向ユーザーインターフェイスと呼ぶこともあるかもしれません。そのほかにも OOUX という表記も見られますが、ここでは一貫した呼び名を定めておきたいため、便宜上 OOUI と呼ぶことにします。 私たちが普段目にするGUIは元来OOUIの思想に基づいていると考えられるのですが、中にはとても機能指向的（タスクベース）な設計で構築されたGUIが多くみられるため、特にオブジェクト指向的であるものを強調・区別す
カジュアルゲーム『マモノチューバーズ』のUI／ロゴデザイン | cacalia Kibela
この記事はHappy Elementsカカリアスタジオ Advent Calendar 2019の17日目の記事です。 こんにちわ、HappyElements カカリアスタジオのグラフィックデザイナーです！ 先日の「キャットバスターズ」のロゴ制作の記事に続き、２つ目の記事を書かせていただきました！ 今回は、以前カカリアスタジオからリリースしたカジュアルゲームアプリ 『マモノチューバーズ』 のUIやロゴ制作についてお話したいと思います。 参考：新作カジュアルゲーム「マモノチューバーズ」、配信開始 はじめに 「マモノチューバーズ」は、不思議な「マモノ」たちが流行りの動画配信アプリでチューバーとして色々な動画を配信するお手伝いをするカジュアルアプリゲームです。 近年スマートフォンゲームの開発規模が大きくなり、開発が長期化する影響で「０からゲームを作る経験」が積みづらくなっている現状があり、新規開
デザインとプログラミング 2020
この講義はZoomを利用した完全リモートで行います。ZoomのURLなどオンラインでの参加についての情報は、SFC SOLを参照してください。 慶應義塾大学湘南藤沢キャンパス総合政策学部・環境情報学部2020年度秋学期、金曜日5時限担当教員: 田所淳履修条件: PC (macOS、Windows、Linuxのいずれか) の基本操作について習得していること。学生が準備するソフト・機材: macOS、Windows、LinuxのいずれかのOSがインストールされたノートPC 最終課題について 最終課題テーマ「音を視る – サウンドのビジュアライズ」 最終課題は、今回解析したp5.soundライブラリーのFFTを用いて、音響をビジュアライズした作品を制作してください。 最終発表の受付は締切ました (12月10日)履修者は全員 (最終発表を希望した人もしなかった人も) 最終作品を提出してください最終
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LT会.pdf
Fontworks Inc.
paintory
