• Category Archives: デザイン / UIUX

未来のデジタル体験におけるモーションデザインの重要性 | UX MILK

未来のデジタル体験におけるモーションデザインの重要性 | UX MILK
«  うむ。動きによる案内はいつでも大事。「モーションは未来のデザインにおいて決定的に重要。デザイナーが根本的な問題を解決しインターフェイスを人間化することでマシンとユーザーの信頼関係を構築する助けになる」。
    

CSSで実装されたボタンのかわいい動きに思わずクリックしたくなってしまうCSSアニメーションの実装方法 | コリス

CSSで実装されたボタンのかわいい動きに思わずクリックしたくなってしまうCSSアニメーションの実装方法 | コリス
«  激しく実装したい感に駆られる。「ボタンをクリックするためにホバーするとボタンがゆらゆら揺れる」「ボタン自体だけでなく文字が少し遅れて揺れるのもいいですね」。
    

【UX戦略を考える】LP(ランディングページ)の余分な要素を削ぎ落とし、デザイン性とコンバージョン率を向上させる|SeleQt

【UX戦略を考える】LP(ランディングページ)の余分な要素を削ぎ落とし、デザイン性とコンバージョン率を向上させる|SeleQt
«  この辺、難しいのよね。特に日本向け。「見やすいように整理整頓し余計なものを取り除くことが改善のための第一歩。ユーザーの誘導の妨げになるものを排除する」。
    

プレーンテキストでデータを入力すると自動でチャートを生成してくれるWebアプリ・「FastCharts」 | かちびと.net

プレーンテキストでデータを入力すると自動でチャートを生成してくれるWebアプリ・「FastCharts」 | かちびと.net
«  便利そうなのでメモ。使えるところありそう。「チャート生成後もデータやスタイル、グラフの種類も選択など、そこそこ細かくカスタマイズ可能です」。
    

グラフィックデザイナーの佐藤卓がデザインした作品10選 | Design Magazine

グラフィックデザイナーの佐藤卓がデザインした作品10選 | Design Magazine
«  すっきり系。「2018年度芸術選奨の文部科学大臣賞を受賞したグラフィックデザイナーの佐藤卓氏。パッケージデザインやグラフィックデザインからTV企画やアートディレクションなど幅広く活躍」。
    

100年前のポスターっぽいビジュアルの作り方。芸術運動ロシア・アヴァンギャルドから着想を得て。 | 東京上野のWeb制作会社LIG

100年前のポスターっぽいビジュアルの作り方。芸術運動ロシア・アヴァンギャルドから着想を得て。 | 東京上野のWeb制作会社LIG
«  渋さを出すには。「最近『時代を感じさせるようなグラフィック』を作る機会があり、なんとなく要点を掴んだ気がするのでこの記事で簡単に手順をご紹介」。
    

独断と偏見で選ぶ「デザインに強い人が選ぶ黒、黄、赤、青」に激しく納得。一方「使うだけで人が去っていく色」も – Togetter

独断と偏見で選ぶ「デザインに強い人が選ぶ黒、黄、赤、青」に激しく納得。一方「使うだけで人が去っていく色」も - Togetter
«  そのとおり。勝てない。「ぐぅ分かる、色彩感覚強い人間にどうしても勝てない」「原色をそのまま使うと目が痛いからな…」「CMYKで表現しやすい」。
    

非常口のマークが「緑色」に変わった、極めて重要な理由 – ねとらぼ

非常口のマークが「緑色」に変わった、極めて重要な理由 - ねとらぼ
«  うむ。色相環というヤツな。「向かい合う2色の関係を『補色』といい、互いに引き立て合う効果を持ちます。緑色なら、燃えさかる火(赤色)の中でもはっきりと確認できるというわけです」。
    

品川駅の改札外にある案内サイン…「デザインの敗北または要件の伝達不備案件」である原型の上から現場職員作成らしき野良サインが貼られているがその完成度が高すぎた – Togetter

品川駅の改札外にある案内サイン…「デザインの敗北または要件の伝達不備案件」である原型の上から現場職員作成らしき野良サインが貼られているがその完成度が高すぎた - Togetter
«  すごいがんばってる。見に行かねば。「メイリオとArialでようここまで作らはりましたわ」。
    

保存版!デザインツールの総まとめ -200種類以上の定番ツールから最近リリースされた注目のツールまで | コリス

保存版!デザインツールの総まとめ -200種類以上の定番ツールから最近リリースされた注目のツールまで | コリス
«  便利そうなのでメモ。「Webサイト、スマホアプリの制作・開発に携わるすべての人に役立つ、200種類以上の有料・無料のデザインツールを紹介します」。
    

【UIデザインのトレンド2019】インターフェイスのユーザビリティを向上させるデザインの多様性と効果的なテクニック|SeleQt

【UIデザインのトレンド2019】インターフェイスのユーザビリティを向上させるデザインの多様性と効果的なテクニック|SeleQt
«  あとで試す。「2019年には間違いなく素晴らしい多様性と、インターフェイスのユーザビリティを向上させる効果的な方法が探求され続けることでしょう」。
    

ソリッドとアウトライン、どちらのアイコンが認識しやすいか | コリス

ソリッドとアウトライン、どちらのアイコンが認識しやすいか | コリス
«  うーん、ケースバイケースかな、とも思う。「より速い認識率を望むのであれば、ソリッドスタイルのアイコンが優れています。ただし、このルールには念頭におくべき例外があります」。
    

より良いUXのための、役立つフィルターのカテゴリーと値の決め方 | U-Site

より良いUXのための、役立つフィルターのカテゴリーと値の決め方 | U-Site
«  考えていかねば。「真にユーザブルなファセット検索では、適切で、ユーザーが予測でき、業界用語のない、優先順位づけされたフィルターカテゴリーとフィルター値が提供されているのである」。
    

レスポンシブ用にfont-size、margin、paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS | コリス

レスポンシブ用にfont-size、margin、paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS | コリス
«  便利そうなのでメモ。「デスクトップ・タブレット・スマホなどの異なるスクリーンサイズに応じて設定したブレークポイントをベースに」。
    

日付を指定するだけでunicodeによるカレンダーを作ってくれるWebアプリ「Unicode Calendar Generator」 | かちびと.net

日付を指定するだけでunicodeによるカレンダーを作ってくれるWebアプリ「Unicode Calendar Generator」 | かちびと.net
«  こういう謎(!)エピソード好きです。「開発者さんは病に伏している3日の間に、特に何の目的もなく作ったそうです」。
    

[CSS] 実装がこれなら思っていたより簡単!グラデーションが変化する美しいエフェクトを実装するスタイルシート | コリス

[CSS] 実装がこれなら思っていたより簡単!グラデーションが変化する美しいエフェクトを実装するスタイルシート | コリス
«  あら、かわいい。「ホバーすると、マウスの動きに追従してグラデーションが変化するボタンを実装するスタイルシートのテクニックを紹介します」。
    

もうこれでUI用のアイコンには困らない!商用でも完全無料で利用できる3000種類のシンプルなアイコン素材 | コリス

もうこれでUI用のアイコンには困らない!商用でも完全無料で利用できる3000種類のシンプルなアイコン素材 | コリス
«  まずは確保やな。「SVGまで完備されたMaterial Icons Library」「一度にすべてのアイテムがダウンロードできるので、備えておくと便利だと思います」。
    

calc()以外にもCSSの数学関数が新しく増える!今度はサイン・コサイン・タンジェントが追加 | コリス

calc()以外にもCSSの数学関数が新しく増える!今度はサイン・コサイン・タンジェントが追加 | コリス
«  CSSすげー。「CSSの数学関数と言えばcalc()関数、多くの人が便利に使用していると思います。そんなCSSの数学関数がどうやら増える方向で動いているようです」。
    

シンプルなデザインを実現するための4つの方法 | UX MILK

シンプルなデザインを実現するための4つの方法 | UX MILK
«  念頭に置いておこうかと。シンプルであることは大事。「ユーザーが楽に目標を達成できる美しく使いやすいデザインを作り出すために、ユーザーの目標からシステムの制約までの複雑なことを深く掘り下げる」。
    

[CSS] メディアクエリとは異なる、レスポンシブ対応のモジュール式コンポーネントの実装に適したコンテナクエリ | コリス

[CSS] メディアクエリとは異なる、レスポンシブ対応のモジュール式コンポーネントの実装に適したコンテナクエリ | コリス
«  便利そうなのでメモ。「レスポンシブ対応のモジュール式コンポーネントを実装する際に適したコンテナクエリの考え方を紹介します」。
    

和風デザイン攻略!商用可な毛筆フリーフォント厳選27個まとめ【2019年版】 – PhotoshopVIP

和風デザイン攻略!商用可な毛筆フリーフォント厳選27個まとめ【2019年版】 - PhotoshopVIP
«  日本語フォント、ありがとうございます。「年賀状だけでなく、和風なデザインなどで必要な毛筆フォントは、上品さや高級なイメージを演出できる、持っておくと便利な書体です」。
    

2019年のWordPress案件には必須級、主流スターターテーマを全部試してまとめてみた | バンクーバーのうぇぶ屋

2019年のWordPress案件には必須級、主流スターターテーマを全部試してまとめてみた | バンクーバーのうぇぶ屋
«  勉強になります。「若手WordPressエンジニアな皆様の話について行けるようにと、今回スターターテーマ系を一度全部まとめておこうというのが目的」。
    

「え?それそんなかかるの?」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 東京上野のWeb制作会社LIG

「え?それそんなかかるの?」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 東京上野のWeb制作会社LIG
«  認識の一致は重要。「いざエンジニアに渡したら…『え?これそんな実装難しいの?』なんて状態になったことありませんか?」
    

ユーザーインターフェースをいい動きにするには2つの要素が大事らしい→試してみると確かに急にカッコよくなってすごい – Togetter

ユーザーインターフェースをいい動きにするには2つの要素が大事らしい→試してみると確かに急にカッコよくなってすごい - Togetter
«  ああ、確かに!!「UIを良い動きにするには、(1)直線ではなく曲線を使う (2)各部品をずらして動かす の2つが基本となりそう」。
    

ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -Code Crumbs | コリス

ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -Code Crumbs | コリス
«  便利そうなのでメモ。「JavaScriptやPythonやC++などのソースコードを分析し、構造や階層・依存関係などを視覚的に構築する便利な無料ツール」。