• Category Archives: デザイン / UIUX

CSSの中央揃えで、最も万能で信頼できる実装テクニック | コリス

CSSの中央揃えで、最も万能で信頼できる実装テクニック | コリス
«  タイムリーなのでメモ。「CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています」「要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニック」。
    

最近のロゴのデザインに使われている、2021年に注目しておきたいトレンドのまとめ -Logo Design Trends 2021 | コリス

最近のロゴのデザインに使われている、2021年に注目しておきたいトレンドのまとめ -Logo Design Trends 2021 | コリス
«  なるほど。「デザイナーは複雑なパターンや複雑なフォントを削除し、その代わりにさまざまなサイズやデバイスに対応できるミニマルなデザインを選択」。
    

「WEB屋しか使わない単語だから…」サイトの上にある押すとメニュー出てくる3本線のアイコンは「ハンバーガーメニュー」というらしい – Togetter

「WEB屋しか使わない単語だから…」サイトの上にある押すとメニュー出てくる3本線のアイコンは「ハンバーガーメニュー」というらしい - Togetter
«  3本線のヤツ、の方が通る。「一般的な用語じゃ無かった」「使ってる人には全く浸透してない」「点々が9個のをワッフルメニュー」。
    

最新の手法でブラウザのタブに表示される「Favicon(ファビコン)」を作成するとこうなる – GIGAZINE

最新の手法でブラウザのタブに表示される「Favicon(ファビコン)」を作成するとこうなる - GIGAZINE
«  あとで試す。「SVG画像を用いることを推奨」「最新の手法では画像サイズに合わせて大量のファビコンを用意する必要がなく、非常に簡単にファビコンを作成することが可能」。
    

商用利用OK!2020年にリリースされた無料フォント40 | Webクリエイターボックス

商用利用OK!2020年にリリースされた無料フォント40 | Webクリエイターボックス
«  マメロンは良く見るようになったかも。日本語フォント、ありがとうございます。「どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです」。
    

とあるデベロッパーが、JavaScriptだけでどのようにしてAirDropを再現したか | コリス

とあるデベロッパーが、JavaScriptだけでどのようにしてAirDropを再現したか | コリス
«  意味がわからないよ…(褒め言葉)。「タップ・クリックするだけで他のデバイスと簡単にファイルを共有できるAirDropをJavaScriptだけで再現したその仕組みを紹介します」。
    

CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説 | コリス

CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説 | コリス
«  おさえておかねば。「CSSのスクロールスナップについて、基礎知識をはじめ、各プロパティの機能や使い方、スクロールスナップの実際の使用例、実装の注意点などを紹介します」。
    

【総まとめ】2020年公開のすごいPhotoshopチュートリアル、作り方厳選まとめ – PhotoshopVIP

【総まとめ】2020年公開のすごいPhotoshopチュートリアル、作り方厳選まとめ - PhotoshopVIP
«  すごいね…。「ボタンひとつで完成のお手軽写真やアクション、合成テクニックなど、デザイナーが覚えておくと便利な人気のデザインスタイルのつくり方がずらり揃います」。
    

ヴィンテージデザインの時代ごとの使い方や特徴、無料素材のまとめ | コリス

ヴィンテージデザインの時代ごとの使い方や特徴、無料素材のまとめ | コリス
«  勉強になります。「19世紀のヴィンテージスタイルを中心に、その時代ごとのデザインの特徴と使い方を紹介します。合わせて、個人・商用で無料・有料で利用できるデザイン素材・フォントもご紹介」。
    

ChromeのアップデートでGoogleフォントがページ読み込みのボトルネックになるという指摘 – GIGAZINE

ChromeのアップデートでGoogleフォントがページ読み込みのボトルネックになるという指摘 - GIGAZINE
«  おさえておく。「ブラウザキャッシュがサイトごとに分離されることになり、同一のリソースをロードする場合でもサイトが異なれば再度ロードが必要になりました」。
    

2020年のCSSのまとめ、FlexboxやCSS Gridの使用状況、よく使用するプロパティや単位、人気のフレームワークやツールなど | コリス

2020年のCSSのまとめ、FlexboxやCSS Gridの使用状況、よく使用するプロパティや単位、人気のフレームワークやツールなど | コリス
«  CSS、ヤバい(歓喜)。「CSSを10年以上書いてきた人にとって、この2020年は今までとは全く違ったCSSになったと感じた人も多いと思います」。
    

フォントが大好物な人は要チェック!2020年、日本語の新作フリーフォントのまとめ | コリス

フォントが大好物な人は要チェック!2020年、日本語の新作フリーフォントのまとめ | コリス
«  日本語フォント、ありがとうございます。マメロン、すごい。「2020年もあと残り1ヵ月、今年リリースされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介」。
    

Webページやスマホアプリでよく使用される代表的な5つのレイアウトをCSS Gridで実装するテクニック | コリス

Webページやスマホアプリでよく使用される代表的な5つのレイアウトをCSS Gridで実装するテクニック | コリス
«  どこかで試す。いろいろとやってみたい。「CSS Gridを使用すると、今まで少し複雑だったレイアウトもシンプルなコードで簡単に実装できます」。
    

サイトの利用規約に要約をつけてUXを向上する | UX MILK

サイトの利用規約に要約をつけてUXを向上する | UX MILK
«  確かに。「サイトの利用規約は、もっと理解しやすくあるべきです。そうしなければ、ユーザーがサイトを間違った方法で使ったり、法律に違反したり、知らないうちに他のユーザーに損害を与えたりすることがありえます」。
    

複数のアイコンプロジェクトから、使用するアイコンだけをアイコンフォントやSVGのセットにできる無料ツール | コリス

複数のアイコンプロジェクトから、使用するアイコンだけをアイコンフォントやSVGのセットにできる無料ツール | コリス
«  メモ。「例えば、Bootstrapからホームとアローだけをセットにするとか、BootstrapのホームとMaterial Designのアローをセットにするとかも簡単」。
    

Responsive Height Design -レスポンシブを高さの観点から、Webサイトやスマホアプリの実装で役立つテクニック | コリス

Responsive Height Design -レスポンシブを高さの観点から、Webサイトやスマホアプリの実装で役立つテクニック | コリス
«  あとで確認する。「レスポンシブを高さの観点から考慮した、Webサイトやスマホアプリの実装で役立つCSSのテクニックを紹介します」。
    

Adobe Photoshopで目映いばかりの金ピカを手に入れろ!あらゆる被写体をゴールドにする無料アクション | コリス

Adobe Photoshopで目映いばかりの金ピカを手に入れろ!あらゆる被写体をゴールドにする無料アクション | コリス
«  自宅が金の茶室に…。「数クリックとしたのは被写体の選択操作で、金ピカにするのはわずか1クリック。簡単に、目映いばかりの黄金エフェクトを楽しめます」。
    

最近のアイコンが似通ってきている問題 | デザイン会社ビートラックスブログ

最近のアイコンが似通ってきている問題 | デザイン会社ビートラックスブログ
«  前半の議論も良いけど、後半のデザイン機軸の変遷まとめもありがたい。「現在のグラデーションデザインにたどり着くまでにどのようなデザインスタイルがあったのかをさくっと振り返ってみる」。
    

CSSの変数(カスタムプロパティ)便利な使い方を詳しく解説 | コリス

CSSの変数(カスタムプロパティ)便利な使い方を詳しく解説 | コリス
«  頭の整理に。「カスタムプロパティの基礎知識、便利な使い方を詳しく解説。Webページやスマホアプリのレイアウト、コンポーネントなど、実際の使用例がたくさんあるので、実用的なテクニックが満載」。
    

Googleが提供しているサービスのアイコンが統一性のあるデザインに変更された結果「視認性なんとかして」「アイコンの意味が」と嘆くみなさん – Togetter

Googleが提供しているサービスのアイコンが統一性のあるデザインに変更された結果「視認性なんとかして」「アイコンの意味が」と嘆くみなさん - Togetter
«  老眼に厳しい…。「キャプションも途中で省略されちゃうから余計わからんやん」「slackあったら気づかないのでは」。
    

デザイナーのノブ「足らんのよ解像度が」「CMYKで作業せえ!」「リッチブラックのリッチが過ぎる!」 – Togetter

デザイナーのノブ「足らんのよ解像度が」「CMYKで作業せえ!」「リッチブラックのリッチが過ぎる!」 - Togetter
«  すごい。脳内再生の度合いがヤバい。「めちゃくちゃ脳内でノブさんが喋りよる」「首がもげそうなほど頷いている」「エンジニアのノブもあらわれそう」。
    

無料でブラウザから3Dモデルが簡単に作れる「SculptGL」を使ってみた – GIGAZINE

無料でブラウザから3Dモデルが簡単に作れる「SculptGL」を使ってみた - GIGAZINE
«  これが無料で使える時代、すごいね。「3Dオブジェクトを彫刻のように削ったり膨らませたりできる」「無料かつアカウント登録やソフトウェアのダウンロードなしで使用できるウェブアプリ」。
    

Photoshopが進化!新しいCC 2021の便利な新機能まとめ(空を置き換え、ニューラルフィルター) – PhotoshopVIP

Photoshopが進化!新しいCC 2021の便利な新機能まとめ(空を置き換え、ニューラルフィルター) - PhotoshopVIP
«  やってみたい。「今回は、新しくなったPhotoshop CC 20201を実際に使いながら、チェックしておきたい便利な新機能をまとめてご紹介」。
    

iPhone 12で、ビューポートのサイズの種類が増えすぎ!デバイスの複雑さがUIの設計にどのように影響するのか | コリス

iPhone 12で、ビューポートのサイズの種類が増えすぎ!デバイスの複雑さがUIの設計にどのように影響するのか | コリス
«  おさえる。「ビューポートのサイズの種類が増え、多くの解像度、アスペクト比、断片化が進むデバイスの複雑さがUIの設計にどのように影響するのか」。
    

Web制作の面倒な作業におさらば!便利な最新オンラインツール30個まとめ – PhotoshopVIP

Web制作の面倒な作業におさらば!便利な最新オンラインツール30個まとめ - PhotoshopVIP
«  便利そうなのでメモ。「これらのツールやサービスを利用すれば、これまで面倒だった作業も手軽に、そして短時間で行うことができ、普段のワークフロー改善にもつながります」。