« 確認しておく。「HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素など」。
2023年最新版 : HTMLのheadの書き方、head内に記述する要素の総まとめ | コリス
Category Archives: デザイン / UIUX
ChromeのDevToolsの便利機能まとめ – Togetter
« ありがたいまとめ。CSSが効かないとき半透明になって、なぜ効かないのか教えてくれるとか。「ChromeやEdgeを中心とした開発者ツール（DevTools）の便利機能のツイートをまとめました。FirefoxやSafariの機能も」。
アクセシビリティ対応のついでに色々やった話 – LIFULL Creators Blog
« 勉強になります。「以前の記事ではどういったマインドでどう組織ができたか、どのように推進しているかについて話しました。今回は、いくつか技術的な副産物が生まれたのでその話をしようと思います」。
紅白の歌詞フォントを特定する速さを競う『紅白フォント合戦』6年ぶりの変更で界隈に激震が走る「絶対フォント感欲しい」 – Togetter
« UD読みやすいんよ…。「ニューセザンヌからUD新ゴへ。初のUD書体登場にざわめき、モリサワ書体が復活となる。界隈に激震」。
2022年のCSSのまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど | コリス
« 見直す。「大きな転換期とも言えるのが、IEのサポート終了です。これにより今まで使用できなかったCSSの機能がたくさん使用できるようになりました」。
【総まとめ】2022年に話題になった世界ベストWebデザイン厳選50個 | PhotoshopVIP
« ほろよいが入っとる。「2022年のベスト・オブ・Webデザイン50個を厳選、ピックアップしご紹介。配色えらびやレイアウトの参考にぴったりで、デザイン制作の参考にしてみてはいかがでしょう」。
2022年も新しいフリーフォントがたくさんリリースされました！ 2022年、日本語の新作フリーフォントのまとめ | コリス
« 日本語フォント、ありがとうございます。「2022年フォント界の大きなニュースは、今年もGoogle Fontsに大量の日本語フォントが追加されたことでしょうか」。
2022年、もっとも注目されたUIデザインのテクニックのまとめ | コリス
« 頭の整理に。基本的なこと多いけど。「UIのデザインにちょっとした一手間を加えるだけで、クライアント、ユーザー、そしてあなた自身が本当に満足できるものを作ることができるかもしれません」。
Web制作のお供に！最新オンライン時短ツール32個まとめ | PhotoshopVIP
« 時事的なものも。「W杯の試合結果と、グラフィックデザインを組み合わせた、ジェネレーティブ・アート・プロジェクト。ゴール数やパスの数、ボール支配率などのデータを、ビジュアルに変換」。
商用利用無料！ 浮世絵専門のイラスト素材、鳥獣戯画・花鳥画・美人画・妖怪・神仏・植物など4300種類！ -Ukiyoe Stock | コリス
« どこかで使う。「商用利用無料、クレジット不要、加工OKの太っ腹ライセンス、登録など面倒なことは一切不要でダウンロードできます」。
知っておくと便利なCSSのセレクタ！ :has()疑似クラスを使用すると、子の数に基づいて親要素のスタイルを定義できる | コリス
« どこかで試す。「指定した要素がある場合にのみスタイルを適用。その機能を利用して、子の数に基づいて親要素のスタイルを定義することができます」。
ダークモード時の画像の扱い方 | Webクリエイターボックス
« 黒くつぶれるファビコンはちょいちょい見る。「以前から個人的にダークモードの対応を推奨しています」「はじめからファビコンの色を切り替えする必要のない色で作っておいたほうが、正直、いいのかなとも思います」。
【フォトショップ】写真から何でも削除できる、怖すぎる新AIツールをつかった魔法テク | PhotoshopVIP
« もうちょっと鮮明な画像やったらどうなる？「手動ですべて加工するとなると、途方もない時間が掛かりそうな作業ですが、かかった時間は、ものの3分ほどというのもオドロキ」。
デザインシステム｜デジタル庁サービスデザインユニット
« 確認する。「一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み『デザインシステム』の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます」。
朗報！ Adobe Fontsの日本語フォントがついに600種類超えに、使用できる日本語書体一覧のPDF 2022年最新版 | コリス
« 日本語フォントありがとうございます。「PDFには（中略）デザインで使いたい日本語フォントが一覧できるので、ダウンロードしておくと便利です」。
経産省が東京オリンピック関係で作ったらしいフリー素材サイト『FIND/47』が素晴らしい写真の宝庫だった「CCBY4.0で誰でもこのレベルのが使える」 – Togetter
« どこかで使う。「これは確かにすごく綺麗！！もったいない」「撮影者出典を明記する必要があるので注意」。
Google Mapsがレビュー数を伸ばすための取り組みとサービスデザイン考察記事｜坪田 朋
« 勉強になります。「Google MapsのUI設計が秀逸だったのは、レビュー登録時に一度で全ての情報を投稿させようとせず、オブジェクト化して段階的に埋めていく仕組みを作った事だと思う」。
デザインシステムの作成に便利すぎるFigmaおすすめUIキット【2022年版】 – PhotoshopVIP
« メモ。「そのまま使えるFigma用おすすめUIキット」「プロトタイプ作成に必要なパーツが一式すべて揃い、プロジェクトに応じて編集も可能。思い立った瞬間にアイデアを最短距離で形に」。
フリーフォントの作者様に感謝！ 最近リリースされた日本語フリーフォントのまとめ -2022年上半期 | コリス
« 日本語フォント、ありがとうございます。「作品にインスパイアされたフォント、プログラミング向けのフォント、タイトルやコピーに使えるデザインフォントなど」。
商用利用無料、国内のフリーイラスト素材の総まとめ | コリス
« あとで確認する。便利そうなのでメモ。「さまざまなメディアで利用できる国内の無料イラスト素材をまとめました。ほぼすべてがクレジット表記は必要無しなので、使いやすいと思います」。
著作権フリー素材がスゴすぎ…広重や夢二も全部無料 国立国会図書館の試み｜まいどなニュース
« ありがとうございます。「美術館や書籍で鑑賞するイメージがある日本画や伝統文様を身近な日用品にアレンジできる！？利用登録も申請もなしで誰でも利用できる」。
Webデザインの有料学習サイトが無料化 IllustratorやPhotoshop入門などが見放題 – ITmedia
« 興味深い試み。「無料公開を決めたのは同サービスの運営から手を引くため。現在は全レッスンの無料公開と共に、有料サービスの利用者に対して返金対応を行っている」。
少しのコードで実装可能なHTML小技集 | Webクリエイターボックス
« あとで試す。どこかで使う。「これまでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました」。
無料＆面倒な操作なしで写真の切り抜きが簡単にできる「PhotoRoom」を使ってみた – GIGAZINE
« 便利そうなのでメモ。「モバイルアプリだけでなくウェブアプリ版もあり、ユーザー登録なしでも使えるツールとなっています」「画像をアップロードしてわずか数秒で切り抜きは完了」。
全ての都立校でAdobe導入 デザイン、Webページ、動画などの製作に活用 – ITmedia
« 三つ子の魂作戦。「東京都立の小中学校、高等学校、特別支援学校などで、デジタルツールを活用した表現力やコミュニケーション力を身につけるための教育環境整備の一環として導入」。
コピペできる！Webサイトがかっこよくなる最新HTMLスニペット38選 – PhotoshopVIP
« あとで試す。「CSSのあまり知られていない小技テクニックから、2022年のWebデザイントレンドを意識したスニペットや、魅力的なアニメーションなどがずらり揃います」。
これだけは押さえよう！住所フォームの作り方 – ケンオールブログ
« ありがたいまとめ。見直してみる。「入力フィールドを少なくする」「何をどう入力したらいいかユーザーに伝わるよう、ラベルに適切な名前と例を表示する」「可能な限り柔軟に入力を受けつける」。
無料で商用利用可能なフラットデザインのイラストを好きな配色でゲットできる「IRA Design」 – GIGAZINE
« あとで試す。使いたい。「ウェブサイトや資料などで簡単なイメージイラストを使いたい時に、30種類のイラストを自分で配色を決定してダウンロードできる」。
Photoshopが待望の「WebP」形式に対応、編集や保存が可能に – ITmedia
« おお、ついに公式で対応きた。「Photoshopなど一部の画像編集ソフトではWebP形式に対応していない場合があり、WebP画像を保存しても閲覧などがしにくい欠点があった」。
Google Chromeのロゴが8年ぶりに変わる – GIGAZINE
« あとで良く見る。「デザインチームはChromeのロゴをOS別にカスタマイズしているとのこと。例えばWindows版の新しいロゴは、他のOSのロゴよりも赤・黄・緑のグラデーションが濃くなっているそうです」。