« ハイファイブ株式会社さんの台形になるほどなぁと。「今月は、シンプルながらもデザイン性の高いWebサイトを中心にピックアップしています。ぜひご自身のデザイン制作に役立ててみてください」。
2020年8月：デザインの参考にしたいWebサイト12選 | Web Design Trends
Category Archives: デザイン / UIUX
noteはじめます。｜モリサワ note編集部
« モリサワさんがnote開始したらしいので。「モリサワはまもなく100周年を迎えるフォントメーカーです。私たちは1924年に写真植字機という機械の発明によって生まれた会社です」「お客様と一緒になって文字文化の継承に努めています」。
CSSの用語を視覚的に学べる・「CSS Vocabulary」 | かちびと.net
« 15年前に欲しかった…。「実際のCSSのコードが左ペインに書かれており、右ペインにCSSで使われている用語がリスト化されていて、選択するとコードの箇所をハイライトしてくれる、というもの」。
Web制作が面白いほどはかどる！便利な最新オンラインツール54個まとめ – PhotoshopVIP
« 便利そうなのでメモ。「ますます進化するウェブ制作の現場で重宝する、便利な最新オンラインツールをまとめてご紹介」「制作ワークフローを改善できる時短ツールが多数揃っています」。
Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説 | コリス
« どこかで試す。「依存関係のインストール手順、ページやコンポーネントの実装、jQueryを使用せずにシンプルなバニラJSでコンポーネントを実装する方法など」。
商用可！手書きでナチュラルな無料フォント132個まとめ 2020年完全版（和 / 英文対応） – PhotoshopVIP
« 日本語フォント、ありがとうございます。「フォント素材は探しているだけで時間だけが過ぎていたなんてことも。無料で商用利用も可能な手書き風フリーフォント素材をご紹介」。
CSSでさまざまなスタイルのボタンを簡単に実装できる！モジュール式の拡張可能なCSSライブラリ -Knopf.css | コリス
« どこかで使う。「通常のボタンだけでなく、アイコン付きボタン、ブロック状のボタン、リフレッシュボタン、グルーピングボタン、プルダウンボタンなど」。
動きで魅せる！Web制作の参考UIインタラクション、アニメーション38個まとめ – PhotoshopVIP
« おさえる。「ユニークでクリエイティブなアイデアが満載の素敵アニメーションが揃っており、今後のウェブデザインがますます楽しみになる、未来を感じるデザインを中心に集めています」。
Googleフォントをサブセット化してページの読み込みをスムーズに | Webクリエイターボックス
« どこかで試す。「日本語フォントはなかなか容量が大きくてページの読み込み速度に影響が出てしまいます。そこで必要なフォントのみを指定できるサブセット化をしてみましょう」。
2020年版：誰でもプロ並みの配色が作れる！便利な配色パターン見本サービスまとめ | Web Design Trends
« ありがたいまとめ。「初心者の方でも優れた配色ができる配色パターン見本サービスをまとめました。下記のように、色の数ごとにおすすめのサービスをまとめています」。
CSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説する「this vs that」 | かちびと.net
« 良さげ。「例えばdisplay:noneとhiddenはどう違うのか等、結果として同じように見えるけど実際は何が違うのかを解説する」。
CSSで美しいシャドウをつけるbox-shadowの古い書き方とこれからの書き方 | コリス
« あとで試す。CSSは本当にすごくなった。「少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます」。
手書きイラスト苦手克服！数千種類のイラスト素材を無料ダウンロードできるサイトOuch – PhotoshopVIP
« どこかで使う。「カートへの追加、404ページ、ログインページなどの一般的なものにイラストを加えることで、使いやすさやアクセシビリティを向上させることができます」。
Web制作参考アイデア集！話題の最新ウェブデザイン40個まとめ – PhotoshopVIP
« 追いつかないと。「アニメーションが当たり前となった今、ウェブデザインの魅せ方はさらに進化を続けています。2020年に入って紹介したウェブサイトと一緒に確認してみてはいかがでしょう」。
2020年、知っておくと便利なCSSのプロパティのまとめ | コリス
« 勉強になります。「一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更、アイコンの横並び、タイル状の背景をいい感じに配置など」。
CSSのみで、クリックするとGIFアニメが再生されるやつ | かちびと.net
« どこかで使う。「画像をクリックするとGIFアニメが再生される、みたいなやつです。マウスホバーで再生というお手軽な方法もあるけど、クリック再生はこれはこれで利用シーンがあるんじゃないかなと」。
古いコンテンツをどう扱うべきか | UX MILK
« あるあるやね。「最も重要なポイントは、組織は自身のWebサイトが膨らんでいくことを無視している余裕がないということです。毎年コンテンツは増えていき、ユーザー体験も煩雑になるため、なんらかの手を打つ必要があるのです」。
2020年7月：デザインの参考にしたいWebサイト12選 | Web Design Trends
« キャッチアップしていきたい。「2020年7月に見つけた魅力的なサイトをまとめました。優れたデザインのWebサイトからインスピレーションを得て自身のデザイン制作に役立ててみてください」。
ウェブサイトの制作、運営でやってはいけないこと 2020 – ホームページを作る人のネタ帳
« 頭の整理に。「私がこのホームページを作る人のネタ帳を書き始めてから13年がすぎました。今回はその13年前、一番はじめに書いた記事を振り返ってみようかと思いまして、この記事を書き始めています」。
CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック | コリス
« もっと早く知りたかった…。でも、ありがとうございます。「CSSのテクニックだけでなく、デザイン上の注意点も解説されており、実装時の参考になります」。
【悲報】英国が誇る高級ブランド「バーバリー」、新デザイナーによってめちゃくちゃにされる｜暇人速報
« 考えさせられる。他のロゴ談義もいろいろと。「三陽商会とライセンス契約破棄して高級路線維持したけど、日本的には未だにブラックレーベルのイメージよな」。
FlexboxやCSS Gridでよく用いられるレイアウトのコードを提供する「1-Line Layouts*」 | かちびと.net
« おさえておく。「ヘッダ/メインコンテンツ/フッターを1カラムで揃えたパンケーキスタイル、なつかしのHoly Grailレイアウトやカードを並べたUIなど」。
『エイブルのロゴを見る度に頭の中でこうしてやりたくなる』というイラストに「めっちゃわかる」と共感集まる→他のロゴや文字もこうしてやりたい！ – Togetter
« JTで納得。「デザイン的にはそっちの方がよいのは百も承知だけど、ずれてると戻したい、つなげたくなるという衝動がある」。
UXライティングを5W1Hで考える｜nao | UXライター / コピーライター｜note
« みんな大好き5W1H。「実はUXライティングに5W1Hが使えると気付いたのはつい最近で、自分のUXライティングのプロセスを体系化しようと試みたことがきっかけでした」。
CSS 最近のWebページやアプリのレイアウトに適した、ラッパーの実装テクニックを徹底解説 | コリス
« 頭の整理に。「CSSでのラッパーの実装、マージンやパディングの追加、中央揃え、ラッパーのバリエーション、FlexboxやCSS Gridとの組み合わせ方など」。
Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる | コリス
« あとで試す。「ページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます」。
楽天、オリジナルフォント開発－自社サービスなどで順次適用、佐藤可士和氏が監修 – CNET
« 意味がないとは思わないけど。「基本形となるサンセリフ体『Rakuten Sans』は、楽天ロゴを骨格のベースとしており、文字サイズが小さくても高い判別性と可読性を保てるように工夫」。
JavaScriptのジェネレータ関数とイテレータの仕組みをGIFアニメで解説 | コリス
« なるほど、わからん…。「ES6ではジェネレータ関数と呼ばれるクールなものが導入されました」「JavaScriptのジェネレータ関数とイテレータの仕組みをGIFアニメで解説した記事を紹介します」。
フォント管理に大活躍！好きな文字でフォントを一覧表示できる、Win、Mac、Linux対応の国産無料アプリ -fontvuer | コリス
« 良さげ。「国産なので日本語フォントはもちろん、英語フォントもサポート。いろいろなフォントで比べてみたい人、特にフォントがたくさんの人に便利」。
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver
« ふわあ！！「2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいい」「その昔、imgタグには書くのがあたりまえ」。