• Category Archives: デザイン / UIUX

レスポンシブ スマホ対応の軽量で読み込みが早いCSSフレームワーク20選 デザインの大枠はこれで完成|SeleQt

レスポンシブ スマホ対応の軽量で読み込みが早いCSSフレームワーク20選 デザインの大枠はこれで完成|SeleQt
«  便利そうなのでメモ。「いくつかはモジュラーアプローチを使用しているので、特定のプロジェクトに必要なアイテムだけを選ぶだけでいいのです。是非つかってみてください」。
    

Remove.bgからWin、Mac、Linux対応のアプリがリリース!複数画像の切り抜きもドラッグ&ドロップでまとめてできる優れモノ | コリス

Remove.bgからWin、Mac、Linux対応のアプリがリリース!複数画像の切り抜きもドラッグ&ドロップでまとめてできる優れモノ | コリス
«  な、なんだってー。「単体アプリなのでブラウザもPhotoshopも不要。しかも、複数の画像を背景だけを画像から切り抜くこともできます」。
    

意匠法改正が変えるWebサイトリリース・リニューアルのプロセス | Web担当者Forum

意匠法改正が変えるWebサイトリリース・リニューアルのプロセス | Web担当者Forum
«  覚えておかねば。「その9つの要件をクリアできるWebデザインをできるデザイナーは少ないと考えます。だからこそ、意匠権を獲得できるだけのデザインをできるWebデザイナーの価値が上がります」。
    

【第3弾】少しのコードで実装可能な15のCSS小技集 | Webクリエイターボックス

【第3弾】少しのコードで実装可能な15のCSS小技集 | Webクリエイターボックス
«  これはありがたいまとめ。「これまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック」。
    

デザイナーではない人がデザインする上で大切な4つの基本原則 – GIGAZINE

デザイナーではない人がデザインする上で大切な4つの基本原則 - GIGAZINE
«  世界のこんまり案件やった。頭の整理に。「この原則についてMeszaros氏は、『こんまり』こと近藤麻理恵さんの『ときめくもの以外は捨てる』という言葉を引用しています」。
    

CSSでレイアウトする際、z-indexが効かない時の4つの理由と対応方法 | コリス

CSSでレイアウトする際、z-indexが効かない時の4つの理由と対応方法 | コリス
«  もっと早く知りたかったヤツ。ありがとうございます。助かります。「z-indexは重なり順を定義するプロパティですが、単なる重なり順だけでなく、いくつか複雑なルールがあります」。
    

思わず試したくなる、Photoshopのすごい最新チュートリアル、作り方36個まとめ – PhotoshopVIP

思わず試したくなる、Photoshopのすごい最新チュートリアル、作り方36個まとめ - PhotoshopVIP
«  フォトショすげー。「某人気アニメ映画のように写真をイラスト風に加工したり、より見た目に近いライティングエフェクト、本物と見間違うほどリアルな写真合成など」。
    

これ知ってた? base要素にtarget=_blankを加えると、ページ内のすべてのリンクに適用できる | コリス

これ知ってた? base要素にtarget=_blankを加えると、ページ内のすべてのリンクに適用できる | コリス
«  な、なんだってー。「base要素にhref属性を使用することはありましたがtarget属性が使用できるとは」「iframeを使って構成されているページ(楽天とか)にも」。
    

これは便利すぎる!1クリックで画像から背景だけを切り抜く「Remove.bg」がついにPhotoshopに対応 | コリス

これは便利すぎる!1クリックで画像から背景だけを切り抜く「Remove.bg」がついにPhotoshopに対応 | コリス
«  あとで試す。「Photoshopのエクステンションとして利用でき、1クリックで背景だけを画像から切り抜くことができます。下記の切り抜きも1クリックだけです」。
    

【保存版】フロントエンド開発に役立つジャンル別jQueryプラグイン50選 ダウンロードしてすぐに使える!|SeleQt

【保存版】フロントエンド開発に役立つジャンル別jQueryプラグイン50選 ダウンロードしてすぐに使える!|SeleQt
«  どこかで使う。「特に役立つベストプラグインを50種類ご紹介します。あなたがお探しの機能をすばやく見つけられるよう、8つのカテゴリに分類しました」。
    

プログラマーに支持されている使いやすい無料のCSS・HTMLエディタ10選|SeleQt

プログラマーに支持されている使いやすい無料のCSS・HTMLエディタ10選|SeleQt
«  ありがたいまとめ。「正しいツールを用いれば、何もないところから、魅力的で最先端なCSSの効果を用いて最新のウェブサイトを展開することは、指先ひとつでできる簡単なことです」。
    

Webページ内で未使用のCSSを高速で削除してくれるライブラリ・「DropCSS」 | かちびと.net

Webページ内で未使用のCSSを高速で削除してくれるライブラリ・「DropCSS」 | かちびと.net
«  便利そうなのでメモ。「本ライブラリのようにWebページ単位でのツールは既存サイトのメンテナンスよりも、開発中にお世話になりそうですね」。
    

[CSS] 三角形で繋がったパンくずのナビゲーションを実装するスタイルシートのテクニックまとめ | コリス

[CSS] 三角形で繋がったパンくずのナビゲーションを実装するスタイルシートのテクニックまとめ | コリス
«  1年に1回くらい、めっちゃやりたくなるヤツ。「CSSでの実装方法はいろいろあり、またCSSでシャドウやグラデーションを適用したバリエーションの実装方法も解説します」。
    

テプラ修正しないと案内板を体を成してなかったLOFTの案内板が改装で判りやすくなった、が… – Togetter

テプラ修正しないと案内板を体を成してなかったLOFTの案内板が改装で判りやすくなった、が… - Togetter
«  例の「デザインの敗北」からの、という話。「銀座LOFTがこの春の改装で案内板をリニューアル」「カフェ風の何か」「ロフトなんだからむしろテプラがあった方がかっこいい気も」。
    

情報過多な時代に私たちはどうコンテンツを届けるのか | UX MILK

情報過多な時代に私たちはどうコンテンツを届けるのか | UX MILK
«  この辺は気になるところ。「情報オーバーロードによって、ユーザーがスクリーンに集中している時間を奪う競争は過熱しています。しかし、ユーザーがスクリーンを見られない時間についてはどうでしょうか」。
    

ウェブデザイン制作が加速中!便利な最新オンラインツール53個まとめ – PhotoshopVIP

ウェブデザイン制作が加速中!便利な最新オンラインツール53個まとめ - PhotoshopVIP
«  便利そうなのでメモ。「これらのツールやサービスを利用すれば、デザイン制作で面倒な作業も手軽に、短時間で行うことができ、より効果的にプロジェクトを進めることができます」。
    

Web制作者は要チェック!Chromiumを採用したEdgeがリリースされると、CSSやJavaScriptはどう変わるのか | コリス

Web制作者は要チェック!Chromiumを採用したEdgeがリリースされると、CSSやJavaScriptはどう変わるのか | コリス
«  目を通しておくヤツ。「業界内の多くの人が、ブラウザの多様性が失なわれたことに悲しみました。しかし、私個人としては喜びに満ちています」。
    

商品を360度回転できる画像ビューワーを簡単に実装できるスクリプト -JS Cloudimage 360 View | コリス

商品を360度回転できる画像ビューワーを簡単に実装できるスクリプト -JS Cloudimage 360 View | コリス
«  どこかで使いたい。かなり。「商品の画像を複数枚用意することで、バーチャルツアーを提供できるシンプルでインタラクティブなJavaScriptライブラリ」。
    

Visual Studio Codeでページやアプリなど、フロントエンドの実装が楽になる機能拡張 -Gimli | コリス

Visual Studio Codeでページやアプリなど、フロントエンドの実装が楽になる機能拡張 -Gimli | コリス
«  良さげ。「CSS GridやFlexboxの実装が単純化されるツールで、React、VueJS、Angularなど、様々なフレームワークやライブラリもサポート」。
    

「WordPress Popular Posts」にオリジナルのコンテンツタグを追加する方法 | NxWorld

「WordPress Popular Posts」にオリジナルのコンテンツタグを追加する方法 | NxWorld
«  どこかで使う。「複数箇所に設置していて且つ異なる内容を出力させるとかコード書くのが苦手なクライアントでも出力内容を変更しやすいようにといったときには便利」。
    

スマホも対応!スクリーンいっぱいに表示させるスライダーを実装するスクリプト -FullScreen Slider | コリス

スマホも対応!スクリーンいっぱいに表示させるスライダーを実装するスクリプト -FullScreen Slider | コリス
«  どこかで使う。「ページ内のセクションをスクリーンいっぱいに表示し、マウスのクリック・ホイール操作、スマホのタップ・スワイプ操作に対応した快適なスライダー」。
    

商用可!手書きでナチュラルな無料フォント65個まとめ 2019年完全フリー版(和 / 英文対応) – PhotoshopVIP

商用可!手書きでナチュラルな無料フォント65個まとめ 2019年完全フリー版(和 / 英文対応) - PhotoshopVIP
«  日本語フォント、ありがとうございます。「ナチュラルな手書きデザインを検討中のひとにおすすめしたいコンテンツ。ラフで少し崩したような絶妙なバランス」。
    

UXを高めるための効果的な入力フォームとは?テキスト入力フォームに最適なデザインを考える|SeleQt

UXを高めるための効果的な入力フォームとは?テキスト入力フォームに最適なデザインを考える|SeleQt
«  わかりやすさよね。「一番良いのは、入力フォームの機能とその使い方を表示しておくことです。言い換えれば、見た目のインパクトが強ければ操作方法が簡単に分かるということです」。
    

Google Maps URLで現在地からのルートを「交通手段別」で作る | 東京上野のWeb制作会社LIG

Google Maps URLで現在地からのルートを「交通手段別」で作る | 東京上野のWeb制作会社LIG
«  どこかで使う。「サイト上に埋め込む方法もありますが、直接GoogleMapにリンクしてしまったほうが大画面で見られるので、使い勝手がいい場合もありますね」。
    

「WordPress Popular Posts」の順位情報を取得して通常のルーフ?などで利用・表示する方法 | NxWorld

「WordPress Popular Posts」の順位情報を取得して通常のルーフ?などで利用・表示する方法 | NxWorld
«  便利そうなのでメモ。「ランキング上位の記事には順位を示すラベルを付けて目立たせるとかページビューを表示させるといった見栄えや実装が可能になります」。
    

これだけ守れば見やすくなるデザインの基礎 – Speaker Deck

これだけ守れば見やすくなるデザインの基礎 - Speaker Deck
«  根本的なところ。勉強になります。いろいろと。「デザインとは何か?デザイナーは何を考えてデザインを作っているのか?という話から、実際にデザインを評価・検討するための言葉を紹介しています」。
    

無料で手描きの線から超リアルな雲画像を誰でもサクッと作成できる「KumoWorks」レビュー – GIGAZINE

無料で手描きの線から超リアルな雲画像を誰でもサクッと作成できる「KumoWorks」レビュー - GIGAZINE
«  これ、すごい…。「アニメーションの背景美術やイメージボードの制作にお役立ちのツール。絵を全く描けない初心者でも超絶リアルな雲をめちゃくちゃ簡単に描くことができます」。
    

飲食系アプリは装いが足りないーフード×テックを実践するクリスプ&カチリ宮野氏 – CNET

飲食系アプリは装いが足りないーフード×テックを実践するクリスプ&カチリ宮野氏 - CNET
«  難しいところ。どこへ寄せるべきか。「お客様がお店から受ける印象は店舗やウェブからだけではなく、アプリも含まれます。アプリがダサいとブランド感は崩れてしまうでしょう」。