• Category Archives: デザイン / UIUX

最近のHTMLメールで見かけるさまざまなレイアウトやコンポーネントが揃ったデザイン素材 -Email Design System | コリス

最近のHTMLメールで見かけるさまざまなレイアウトやコンポーネントが揃ったデザイン素材 -Email Design System | コリス
«  今はいろいろできるんやねぇ…。しみじみするわ。「HTMLメールのさまざまなデザインが収録されており、制作にも勉強にも役立つ素材です」。
    

このCSSアニメーションのアイデアすごい!CSSの疑似クラスで実装するフローティングラベル | コリス

このCSSアニメーションのアイデアすごい!CSSの疑似クラスで実装するフローティングラベル | コリス
«  ヤバいこれアツい。どこかで使う。「SVGを加えると更に楽しいアニメーションにできます。こういうのを見つけると、なんだかハッピーな気分になりますよね」。
    

これはかっこいい!要素がふわりと浮かんでいるような美しいシャドウを与えるスタイルシート -Box-shadows.css | コリス

これはかっこいい!要素がふわりと浮かんでいるような美しいシャドウを与えるスタイルシート -Box-shadows.css | コリス
«  どこかで使う。「htmlの要素にclassを加えるだけの簡単仕様。ホバーなどの操作に対応して、ふわりとシャドウを与えることもできます」。
    

Web制作の参考になるデザインや技術のアイデアがいっぱい!クリエイターの素晴らしいポートフォリオのまとめ | コリス

Web制作の参考になるデザインや技術のアイデアがいっぱい!クリエイターの素晴らしいポートフォリオのまとめ | コリス
«  便利そうなのでメモ。「JavaScriptのアプリ、WordPress、スタティックなど、さまざまなにデザイン・構築されたポートフォリオサイト」。
    

WordPressの軽量、高速化!ページ表示にかかる時間は1秒未満、WordPressの無料テーマファイル -Susty WP | コリス

WordPressの軽量、高速化!ページ表示にかかる時間は1秒未満、WordPressの無料テーマファイル -Susty WP | コリス
«  どこかで実験したい。「ページ表示にかかる時間は1秒未満、データ転送量わずか7kBで構築されたWordPressの無料テーマファイル」。
    

段組みを使って縦書きの文章をレスポンシブ対応させる方法 | Webクリエイターボックス

段組みを使って縦書きの文章をレスポンシブ対応させる方法 | Webクリエイターボックス
«  どこかで使う。「CSSで文章を縦書きにする表現、少しずつ目にする機会が増えてきたように思います。しかし、縦書きのコンテンツをレスポンシブ対応させるのはなかなか大変」。
    

不思議!? div要素一つで同じスタイルなのに、すべてのブラウザで見た目が異なるスタイルシート | コリス

不思議!? div要素一つで同じスタイルなのに、すべてのブラウザで見た目が異なるスタイルシート | コリス
«  なんや魔法か。「見た目が異なる大きな原因はoutlineプロパティの各ブラウザの実装状況。加えてChromeでは『vertical-align: middle;』も影響」。
    

ウェブサイトをもっと面白く!コピペ可能なHTML/CSSスニペット75個まとめ 2018年7月度 – PhotoshopVIP

ウェブサイトをもっと面白く!コピペ可能なHTML/CSSスニペット75個まとめ 2018年7月度 - PhotoshopVIP
«  勉強になります。「グラデーションやグリッチエフェクト、動きが魅力的なマイクロインタラクション、CSS Gridプロパティの実践的な使い方など」。
    

CSSの単位「rem」を使ったフォントサイズの計算を自動で一覧表示してくれる便利ツール -PxtoRem | コリス

CSSの単位「rem」を使ったフォントサイズの計算を自動で一覧表示してくれる便利ツール -PxtoRem | コリス
«  使える…。「指定したサイズをベースにpx単位でremの指定値を一覧表示してくれる便利なChromeの機能拡張。毎回計算していた人にはかなり嬉しいツール」。
    

Google Chromeユーザーは知っておくべき神ワザ! ひとつ上のスクリーンショット術 | 株式会社LIG

Google Chromeユーザーは知っておくべき神ワザ! ひとつ上のスクリーンショット術 | 株式会社LIG
«  お世話になっております。「OS標準やアドオンに頼っていた方は一度使ってみてはいかがでしょうか?デバイスのフレームとあわせてスクショできるところがお気に入りです」。
    

日本語のフリーフォントをまとめて試せるサイト「 #ためしがき 」をなんで作ったのかと技術的な話 – フロントエンドの地獄

日本語のフリーフォントをまとめて試せるサイト「 #ためしがき 」をなんで作ったのかと技術的な話 - フロントエンドの地獄
«  ありがたいです。「サイトで使っているフォントは商用利用可能なフリーフォントとなっており、画面から、配布先のサイトに遷移することが出来ます。
    

アイコン使いや図版が参考になるサイトまとめ | 株式会社LIG

アイコン使いや図版が参考になるサイトまとめ | 株式会社LIG
«  オサレ感、上がるなぁ。「アイコンや図版のデザインに苦労したことってありませんか? 僕はけっこう毎回苦労するので今回のブログで『アイコン使いや図版が上手いな』と思うサイトを集めてみました」。
    

新しい日本語フォントがたくさんリリースされてる!2018年上半期、日本語の新作フリーフォントのまとめ | コリス

新しい日本語フォントがたくさんリリースされてる!2018年上半期、日本語の新作フリーフォントのまとめ | コリス
«  日本語フォント、ありがとうございます。「手書き風の味のあるフォント、明治や昭和風のレトロなフォント、ホラーフォント、ピクセルフォント、ジョークフォントなど」。
    

UXデザインの承認を得るための「UXの提案書」の作り方 | UX MILK

UXデザインの承認を得るための「UXの提案書」の作り方 | UX MILK
«  そうなのよ。政治的なアレとかね。「良いUXデザインはビジネスに利益をもたらしますし、その点までは誰もが知るところです。しかし、ステークホルダーを巻き込めるかどうかはまったく別の問題です」。
    

よく使うリスト要素のメニュー・ナビゲーションをデザインするスタイルシートのアイデア・実装方法のまとめ | コリス

よく使うリスト要素のメニュー・ナビゲーションをデザインするスタイルシートのアイデア・実装方法のまとめ | コリス
«  すごい時代になったもんや、と。「リスト要素を使ったシンプルなHTMLをどのようにデザイン、スタイルするかのコンテストがCodePenで開かれている」。
    

Googleマップより簡単!JavaScriptで独自マップやナビ機能を作成できる「mapfit」を使ってみた! – paiza開発日誌

Googleマップより簡単!JavaScriptで独自マップやナビ機能を作成できる「mapfit」を使ってみた! - paiza開発日誌
«  便利そうなのでメモ。「Googleマップよりも手軽に扱えるのが特徴で、少ないコードを記述するだけなので誰でも簡単に利用できる」。
    

あふれるホスピタリティ! 気がきくCSSプロパティの精鋭たちを紹介します | 株式会社LIG

あふれるホスピタリティ! 気がきくCSSプロパティの精鋭たちを紹介します | 株式会社LIG
«  なんというか、言われてみればなるほど。「カウンターバーで『お隣の方からです……』的な、ホスピタリティあふれるCSSプロパティにフォーカスしていきたいと思います」。
    

CSSの作業をもっと楽に!無料で使える便利なWebツール40選 – PhotoshopVIP

CSSの作業をもっと楽に!無料で使える便利なWebツール40選 - PhotoshopVIP
«  便利そうなのでメモ。「CSSをベースとしたアニメーション、レスポンシブに対応したナビメニュー作成ツール、パイチャート作成、CSSの圧縮やユニークなサークル型メニューの作成など」。
    

こいつ動くぞ!商用利用無料、シンプルにデザインされたフォントもSVGも揃ったフリーのアイコン素材 -Box Icons | コリス

こいつ動くぞ!商用利用無料、シンプルにデザインされたフォントもSVGも揃ったフリーのアイコン素材 -Box Icons | コリス
«  どこかで使う。「400種類以上のアイテムが揃った、Webサイトやスマホアプリにぴったりなシンプルにデザインされた無料アイコンを紹介します」。
    

効率のよい意思決定のためのデータドリブンデザイン | UX MILK

効率のよい意思決定のためのデータドリブンデザイン | UX MILK
«  ま、それはそうですよね。「どのようなデータが必要で、どこで見つければいいのでしょうか? データを収集する最善の方法は何でしょうか? この質問に対する唯一の普遍的な回答は、『場合による』です」。
    

サイト埋め込みGoogleマップが7月16日からAPIキー必須で有料に、ただし対応不要の場合も多いので慌てずに | Web担当者Forum

サイト埋め込みGoogleマップが7月16日からAPIキー必須で有料に、ただし対応不要の場合も多いので慌てずに | Web担当者Forum
«  ありがたい解説。「iframeの地図は変更なし」「ただし正当な利用には一般向けの無料公開ページでモバイルアプリではないという条件がある」。
    

jQueryはオワコンなのか – ウェブアプリ開発者とウェブサイト制作者の大きな溝 – Togetter

jQueryはオワコンなのか - ウェブアプリ開発者とウェブサイト制作者の大きな溝 - Togetter
«  こんなんケースバイケースやろ。正解なんてない。「jQueryはバリバリの現役で世界中で使われているのは事実。ただ脱却したいのも本当」「jQueryで事が足りる現場もある」。
    

商用でも無料でクレジット表記も不要の、人物イラストを中心に使いやすそうなイラストを大量に公開している・「イラストマン」 | かちびと.net

商用でも無料でクレジット表記も不要の、人物イラストを中心に使いやすそうなイラストを大量に公開している・「イラストマン」 | かちびと.net
«  どこかで使う。「やや少しクセはあるのでコンテンツは多少選びそうですが、それでも貴重な素材配布サイトではないかなぁと思います」。
    

デザインから見たサッカーワールドカップ!日本代表のユニフォームのパターンもダウンロードできます | コリス

デザインから見たサッカーワールドカップ!日本代表のユニフォームのパターンもダウンロードできます | コリス
«  肩に炎の意匠が入ってるヤツ、好きやったなぁ。「サイトの作りも面白く、WebデザインやUXという観点からも楽しめる」「日本が着用しているパターンも掲載」。
    

実装がどんどん簡単になっている!スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters | コリス

実装がどんどん簡単になっている!スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters | コリス
«  本当にCSSすごいんやけど…。どこまでいけるんや…。「汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています」。
    

CSSのスニペットに登録!背景にCSSグラデーションが変化するアニメーションを実装するスタイルシート | コリス

CSSのスニペットに登録!背景にCSSグラデーションが変化するアニメーションを実装するスタイルシート | コリス
«  便利そうなのでメモ。「HTMLもCSSも非常にシンプルで、簡単に利用できます」「時間やグラーデションのカラーは自由に変更できます」。
    

フロントエンドのコーダーの頭の中、デザインを見た時にどんなことを考えるのか | コリス

フロントエンドのコーダーの頭の中、デザインを見た時にどんなことを考えるのか | コリス
«  こんなに理知的に考えられるものなのか。「そのデザインが意味する仕様上のさまざまな可能性やそれらを実現するための実装方法を考えるなど、コーダーとして最も楽しい時間の一つです」。