wdscratchのブックマーク - はてなブックマーク

YouTube公式から「切り抜き動画は全てプロモーションであり、収益化ポリシーに反する」という見解を受け取りました

※追記 YouTubeから回答していただきました https://youtu.be/UA4e__jO-e0

wdscratch 2024/07/07

リンク

私がWEBデザイン制作の参考になりそうだと思うサイトを61個挙げてみた。

日本デザインスクールでは年間1500名ほどの受講生を、未経験からWEBデザイナーに育ててきました。受講生を指導する中でよくあがってくるのが「参考がなかなか見つからない」というお悩み。私も受講生にお伝えすべく、これまで100サイト近くの「参考になりそうなギャラリーサイト」を見てきました。そこで今回は、これまで見てきたギャラリーサイトの中で、みなさんのデザイン制作のお役に立ちそうなサイトを全部で61個ご紹介していきます。全てのサイトをおすすめ度サイト内検索の可否いいね/保存機能の有無ランキング機能の有無掲載サイト数を基準にランクづけし、おすすめできるサイト順に載せているので忙しいという方は、とりあえず上から順にチェックしていただければ大丈夫です！みなさんのデザイン制作に活かしていただけると嬉しいです。【全サイト徹底比較】超参考になるおすすめギャラリーサイトTOP38 ちょう

wdscratch 2024/06/19

リンク

【乗り換え】Adobeソフトに代わるベストな代替ツールはこれ【早見表つき】

Adobeツールの乗り換えを検討し始めたけど、「どこで見つければいいの？」「どんなツールを選べば後悔しない？」「代替ツールのいいところって何だろう？」「乗り換えのタイミング今なのか？」「費用の違いはどのくらい？」普段から利用するツールだからこそ、自分にとって最適なデザインツールを知りたい方向けのリストとなっています。 Adobe Creative Cloudソフトから乗り換えたいと考えているひとへどんな代替ツールがあるか知りたいひといろいろツールを見たけどピンとこないひと自分にあったツールが知りたいひと代替ツールへの乗り換えで失敗したくないひと目次Photoshopの代替ソフトIllustratorの代替ソフトPremiere Proの代替ソフトAfter Effectsの代替ソフトAdobe Creative Cloudの代替ツール Photoshopの代替ソフト 1. A

wdscratch 2024/06/11

リンク

デザイン・コードの知識がなくてもWebサイトやWebアプリを作成できる「create.xyz」／生成AIがプロンプトによる指示だけでデザインとコーディングをやってくれる！【レビュー】

wdscratch 2024/06/10

リンク

誤解しているかも！ CSSの詳細度について、よくある誤解を解説

CSSの詳細度とは、(0,0,2)や(1,0,0)など3つの数字でスタイルを適用する際の優先度を決めるブラウザのアルゴリズムです。要素に対して複数のCSS宣言があり、そのプロパティや値が競合している場合、詳細度が高いものが優先されます。このCSSの詳細度について、よくある誤解を紹介します。 Misconceptions about CSS Specificity by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに詳細度の誤解 1: 詳細度は10進数である詳細度の誤解 2: style属性で詳細度が高くなる詳細度の誤解 3:!importantで詳細度が高くなる終わりにはじめに CSSの詳細度︵Specificity︶、ひいてはカスケード︵Cascade︶に関する記事が公開される度に、私はと

wdscratch 2024/05/23

リンク

CSS設計とは何だったのか？と、コンポーネント環境との関わり

HubSpotやCSS設計に明るい半田のウェブサイトです。ウェブサイトの本質は情報を伝えることですので、それを言い訳にデザインは全体的に工事中です。みんな大好き、あるいは大嫌いなCSS設計。そんな言葉が生まれてから久しく、JavaScriptフレームワーク︵以後JSフレームワーク︶を始めとする技術が提供するスコープ付きのコンポーネント環境の登場によって、そのなりを潜めている気がしなくもない。そんなCSS設計とは何だったのか、をちょっと小難しく振り返ってみます。なお本記事では、区別のためCSS設計が﹁再利用可能なパーツ﹂とみなす単位を︵あるいは慣習的に︶﹁モジュール﹂、JSフレームワークにより提供される単位を﹁コンポーネント﹂と呼びます。 CSS設計が行っていたこと﹁CSS設計﹂と聞くと Block__Element–Modifier という形式の長ったらしいクラス名を付けることだ

wdscratch 2024/05/10

リンク

ダークモードを巡るあれこれ：ダークモードの明るい未来 - enechain Tech Blog

この記事は enechain Advent Calendar 2023 の18日目の記事です。昨日は okp さんの「経験が裏目に？！大手IT企業出身PdMが3カ月で学んだこと」でした！はじめになぜ、今ダークモードかダークモードおさらいダークモードの歴史ダークモードって意味あるの？省電力の効果について文字が見やすい＆目への負担が少ないダークモードの利用率各サービスのダークモードの実際 2023版 X Gmail ミュージック & App Store Instagram iSPEED ダークモード未対応のアプリ＆ダークモードのみのアプリダークモード未対応のアプリペイ系ショッピング系ダークモードのみのアプリダークモードの行方まとめはじめに私はenechainのプロダクトデザイナーで、デザインマネージャーの近藤です。今年の10月に入社しており、もうすぐ3ヶ月が経

wdscratch 2024/04/16

リンク

CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする3 検証 | フロントエンドBlog | ミツエーリンクス

containプロパティにlayoutやpaintを指定した場合やcontent-visibilityプロパティを設定した場合のCSS Containmentの検証をご紹介します。これまでの関連Blogについては﹁CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1概要﹂﹁CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする2検証﹂でご確認いただけます。 layoutの検証 contain: layout;の設定の有無による要素の配置の違いからLayoutの封じ込めを検証します。 containプロパティがない場合 containプロパティの設定がないブロックを用意します。ブロック内に3つの要素を設置します。1つ目の要素は、position: fixed;を設定して相対的な配置にします。2つ目の要素は、flo

wdscratch 2024/04/16

リンク

Figma初心者でも大丈夫！レスポンシブWebデザインをFigmaで作るための3つのポイント

この記事についてこの記事は、スマートフォン時代のWebデザインスクールや Web制作の基礎から学べる﹁Webコーディングスクール﹂の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。また、総務省の﹁通信利用動向調査﹂を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。利用状況 2022年のインターネット利用率︵個人︶は84.9％となっており︵図表4-11-1-2︶、端末別のインターネット利用率︵個人︶は、﹁スマートフォン﹂︵71.2％︶が﹁パソコン﹂︵48.5％︶を22.6ポイント上回っている。︵出典︶総務省﹁通信利用動向調査﹂このようにスマホ、PCどのデバイスでも見ることが

wdscratch 2024/04/16

リンク

もうHTMLをXHTMLで書くことは推奨されないという話 | フロントエンドBlog | ミツエーリンクス

春です。入社式のニュースが流れてくる季節ですが、当社もこの4月に多くの新入社員を迎えることができました。そんな若者について、そもそもXHTMLという単語は何だろうという反応をするかもしれない一方で、長らくHTMLと付き合ってきた人は、XHTMLについて複雑な想いを抱く方も多いだろうと思います。そんな往年のXHTML1時代を過ごしてきた方に改めてお伝えしたいことは、XHTML︵HTML Standardでは正確にはXML構文︶でHTMLを書くことが推奨されないことが仕様に明示されるようになるというものです。これは、HTML Standardを管理しているGitHubにWarn that the XML syntax is not recommendedというプルリクエストが作成されたことによります。このプルリクエストは、XML構文が記載されている14章に次のWarningを追加するとい

wdscratch 2024/04/04

リンク

見えない人はWebをどう閲覧？　本紙サイトの課題にがくぜん、求められる「不十分と認める勇気」【動画も】：東京新聞 TOKYO Web

見えない人はWebをどう閲覧？　本紙サイトの課題にがくぜん、求められる「不十分と認める勇気」【動画も】

wdscratch 2024/03/23

“視覚障害者の慰めの言葉もショックだった。「東京新聞さんが悪すぎるんじゃないですよ。これが普通なんです」”

リンク

Webマニアがざわついた最新Webデザイン３１選【2024年3月版】

優れたデザインで話題となっている、国内外の最新Webデザインをまとめてご紹介。インスピレーションやアイデアの参考になるのはもちろん、2024年のWebトレンド動向も見えてきます。目まぐるしいスピードで新しいトレンドや技術が生まれるWebデザインだからこそ、できるだけ多くのサイトを実際に訪れ、あらゆる角度からアイデアを吸収できるかが鍵となります。ここでは、制作の見本にしたい31点のWebサイトを選んでいます。 Webマニアがざわついた最新Webデザインまとめ Don’t Board Me わずかに揺れるかわいい犬のイラストからはじまる、犬の散歩代行サービスのWebサイト。ピンクと青のパステルカラー配色や、巨大サンセリフ書体、犬好きに刺さるイラスト画によって親しみやすい雰囲気に。 NEWPEACE ページを開いた瞬間に表示されるイラストアニメーションも素敵ですが、スクロールをはじめると同

wdscratch 2024/03/20

リンク

CSSだけでif～else文と同じことができる！しかもすべてのブラウザでサポートされています

CSSでif～else文が使えたら、と思ったことはありませんか？もちろんifとかelseはCSSにはありませんが、CSSだけでif～else文と同じようにスタイルを設定できます。 CSSでif～else文を実現するには...記事の続きを読む

wdscratch 2024/03/12

リンク

【令和最新版】Google Fontsの読み込み最適化の結論｜ TAKLOG

当ブログで行ったGoogle Fontsの読み込み最適化を紹介します。CLSを大幅に改善できたので個人的にはこれが最適解だと思っています。結論いきなり結論ですが、次のHTMLのhrefの値を使用しているGoogle Fontsのそれに変更し、head内で読み込んでください。 <link rel="preconnect" href="https://fonts.google apis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preload" as="style" fetchpriority="high" href="{href}" /> <link rel="stylesheet" href="{href}" media="print" onload='

wdscratch 2024/03/12

リンク

ウェブアクセシビリティ対応、どうすれば？　法改正のポイントと5つのステップを解説｜Goodpatch Blog グッドパッチブログ

アクセシビリティ？　ウチの会社のウェブサイトは大丈夫なの──。法改正によって、障害のある方への「合理的配慮の義務化」が、2024年4月1日をもって民間企業にも適用されることを受け、ウェブデザイン分野ではアクセシビリティ対応の機運が高まっています。とはいえ、「法改正で何が変わったのかよく分からない」「ウェブアクセシビリティってどうすれば対応できるの？」といった疑問を持つ方も少なくないはず。そこで、この記事ではいわゆる「法的義務化」の潮流を解説しつつ、アクセシビリティの基本を押さえていきます。アクセシビリティの考え方は、ウェブに限るものではありません。他のプラットフォームでのソフトウェアデザインや物理的なモノや空間のデザインにおいても、普遍的に重要な視点です。ぜひ、この機会に一緒に学んでいきましょう！なぜ「ウェブアクセシビリティ」に注目が集まっているのか？まず前提として触れておきたい

wdscratch 2024/03/12

リンク

【2024年版】いろんなデザイントレンドを調査、まとめてみた。

私は10年以上にわたり、「最先端の人気デザインを探る」ために数多くののデザイントレンドを調査してきました。 2024年も2ヶ月が過ぎ、今年人気になりそうなデザインスタイルが少しずつ見えはじめています。この記事では、グラフィックやWebデザインなどさまざまな分野で注目されているデザイントレンドを詳しく調べてみたのでご紹介します。デザインで魅了する最先端のスタイルや、革新的なAIツールなど「今後どうなる？」を深掘りしてみました。 Design Trends 2024Adobe Stock 2024クリエイティブトレンド予測Type Trends 2024 by MonotypeGraphic Design Trends for 2024 by Creative MarketGraphic Design Trends 2024 by GraphicMamaWeb Design Trends

wdscratch 2024/03/06

リンク

デザインにセンスは必要ない、大切なのは「情報を整理」する力　Udemyの人気講師が教える、UI/UXデザインの基礎

﹁デザイナーだけがデザインをする時代は古い﹂﹁デザインにセンスはない﹂と語るのは、Udemyの﹁UI/UXの改善を進めるための基礎講座﹂などで人気を誇る、UI/UXデザイナーの濱野将氏。生成AI時代において、デザインをビジネスをつなげるためのポイントや、UI/UXの基礎を解説します。 UI/UXデザイナーが教えるデザインの基本濱野将氏‥それでは、僕からは﹁ビジネスを実現する﹃デザイン﹄の基本﹂をお話しさせていただきます。よろしくお願いします。今日のアジェンダはこんな感じです。﹁デザインの必要性﹂﹁デザイナーだけがデザインする時代はもう古い﹂﹁UI/UXについて﹂。今回はAIがテーマなので﹁AIを使ったプロジェクトの進め方﹂も少し紹介させていただきたいなと思っております。簡単に自己紹介をさせてください。株式会社IMAKE代表の濱野と申します。職業はUI/UXデザイナーで、講師もさせてい

wdscratch 2024/03/05

リンク

M3 Proに勝利。いまだに最強クラスのM1 Mac mini｜Piyomaru

自作の、地道で普通の内容のベンチマークを走らせてみたら、M1 Mac miniがMacBook Pro︵M3 Pro、RAM 36GB︶に勝ってしまった。どうしよう。﹁頭がおかしい﹂と言う人がいるかもしれないので説明まず、Apple Siliconの第1世代である﹁M1﹂とは何か？それは、コンピュータの拡張性とか可能性を全部投げ捨てて、﹁コンピュータをワンチップですべて構成したい﹂というAppleの野望が、ストレートに実現し過ぎてしまった謎SoC︵System on Chip︶です。そして、その最小単位のコンピュータは、RAM 16GBでGPUは速いものの外付けGPUと同じか、最上位のGPUには勝てないぐらい。バッテリー寿命はやたらともつ、無駄のない世界。それだとRAMが少なすぎるとかムービー書き出し処理速度が不十分だというユーザーに向けて、複数のチップを貼り合わせて拡張︵M1 M

wdscratch 2024/02/28

リンク

WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わったのか？実装事例から見る現在のWordPressの設計と構築』

wdscratch 2024/02/27

リンク

エンジニアがデザインについて確認した方が良いこと - Qiita

開発の流れとして、デザイン決定後にデザイン︵Figma︶が開発部隊に渡ってくることは多いと思います。開発着手前にデザインについて確認しておいた方が良いことの備忘です。サンプル画像はWebで作っていますが、内容としてはWebに限らず、iOS/Android Nativeなアプリも対象としています。また、記載順をどうしようか迷ったのですが、特に体系だった説明もできないので思いついた順で書いています。アイコン/画像について画像の形式を確認しましょう画像の形式はベクター画像︵SVG︶なのか、ラスター画像︵PNGなど︶か確認します。アイコン系は基本的にベクターだと思いますので、SVGでExportできない場合はデザイン提供元に確認しましょう。ラスター画像は要件上こだわりがなければ、開発側でWebP/JPEG/PNGなどの特性や稼働環境を鑑みて決定するで問題ないと思います。スマホでは

wdscratch 2024/02/20

リンク

はてなブックマーク

タグ

wdscratchのブックマーク (655)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス