※追記 YouTubeから回答していただきました https://youtu.be/UA4e__jO-e0
![YouTube公式から「切り抜き動画は全てプロモーションであり、収益化ポリシーに反する」という見解を受け取りました](https://cdn-ak-scissors.b.st-hatena.com/image/square/e3d2fd5bb961397fc9f495b8131da784b5f74b96/height=288;version=1;width=512/https%3A%2F%2Fi.ytimg.com%2Fvi%2FU1RLf4qqBG4%2Fhqdefault.jpg)
日本デザインスクールでは年間1500名ほどの受講生を、未経験からWEBデザイナーに育ててきました。受講生を指導する中でよくあがってくるのが「参考がなかなか見つからない」というお悩み。 私も受講生にお伝えすべく、これまで100サイト近くの「参考になりそうなギャラリーサイト」を見てきました。 そこで今回は、これまで見てきたギャラリーサイトの中で、みなさんのデザイン制作のお役に立ちそうなサイトを全部で61個ご紹介していきます。 全てのサイトを おすすめ度 サイト内検索の可否 いいね/保存機能の有無 ランキング機能の有無 掲載サイト数 を基準にランクづけし、おすすめできるサイト順に載せているので忙しいという方は、とりあえず上から順にチェックしていただければ大丈夫です!みなさんのデザイン制作に活かしていただけると嬉しいです。 【全サイト徹底比較】超参考になるおすすめギャラリーサイトTOP38 ちょう
Adobeツールの乗り換えを検討し始めたけど、 「どこで見つければいいの?」「どんなツールを選べば後悔しない?」「代替ツールのいいところって何だろう?」「乗り換えのタイミング今なのか?」「費用の違いはどのくらい?」 普段から利用するツールだからこそ、自分にとって最適なデザインツールを知りたい方向けのリストとなっています。 Adobe Creative Cloudソフトから乗り換えたいと考えているひとへ どんな代替ツールがあるか知りたいひと いろいろツールを見たけどピンとこないひと 自分にあったツールが知りたいひと 代替ツールへの乗り換えで失敗したくないひと 目次Photoshopの代替ソフトIllustratorの代替ソフトPremiere Proの代替ソフトAfter Effectsの代替ソフトAdobe Creative Cloudの代替ツール Photoshopの代替ソフト 1. A
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)に関する記事が公開される度に、私はと
HubSpotやCSS設計に明るい半田のウェブサイトです。 ウェブサイトの本質は情報を伝えることですので、それを言い訳にデザインは全体的に工事中です。 みんな大好き、あるいは大嫌いなCSS設計。そんな言葉が生まれてから久しく、JavaScriptフレームワーク(以後JSフレームワーク)を始めとする技術が提供するスコープ付きのコンポーネント環境の登場によって、そのなりを潜めている気がしなくもない。 そんなCSS設計とは何だったのか、をちょっと小難しく振り返ってみます。 なお本記事では、区別のためCSS設計が「再利用可能なパーツ」とみなす単位を(あるいは慣習的に)「モジュール」、JSフレームワークにより提供される単位を「コンポーネント」と呼びます。 CSS設計が行っていたこと 「CSS設計」と聞くと Block__Element–Modifier という形式の長ったらしいクラス名を付けることだ
この記事は enechain Advent Calendar 2023 の18日目の記事です。昨日は okp さんの「経験が裏目に?!大手IT企業出身PdMが3カ月で学んだこと」でした! はじめに なぜ、今ダークモードか ダークモードおさらい ダークモードの歴史 ダークモードって意味あるの? 省電力の効果について 文字が見やすい&目への負担が少ない ダークモードの利用率 各サービスのダークモードの実際 2023版 X Gmail ミュージック & App Store Instagram iSPEED ダークモード未対応のアプリ&ダークモードのみのアプリ ダークモード未対応のアプリ ペイ系 ショッピング系 ダークモードのみのアプリ ダークモードの行方 まとめ はじめに 私はenechainのプロダクトデザイナーで、デザインマネージャーの近藤です。今年の10月に入社しており、もうすぐ3ヶ月が経
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
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率(個人)は84.9%となっており(図表4-11-1-2)、端末別のインターネット利用率(個人)は、「スマートフォン」(71.2%)が「パソコン」(48.5%)を22.6ポイント上回っている。 (出典)総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが
春です。入社式のニュースが流れてくる季節ですが、当社もこの4月に多くの新入社員を迎えることができました。 そんな若者について、そもそもXHTMLという単語は何だろうという反応をするかもしれない一方で、長らくHTMLと付き合ってきた人は、XHTMLについて複雑な想いを抱く方も多いだろうと思います。そんな往年のXHTML1時代を過ごしてきた方に改めてお伝えしたいことは、XHTML(HTML Standardでは正確にはXML構文)でHTMLを書くことが推奨されないことが仕様に明示されるようになるというものです。 これは、HTML Standardを管理しているGitHubにWarn that the XML syntax is not recommendedというプルリクエストが作成されたことによります。 このプルリクエストは、XML構文が記載されている14章に次のWarningを追加するとい
見えない人はWebをどう閲覧? 本紙サイトの課題にがくぜん、求められる「不十分と認める勇気」【動画も】
優れたデザインで話題となっている、国内外の最新Webデザインをまとめてご紹介。 インスピレーションやアイデアの参考になるのはもちろん、2024年のWebトレンド動向も見えてきます。 目まぐるしいスピードで新しいトレンドや技術が生まれるWebデザインだからこそ、できるだけ多くのサイトを実際に訪れ、あらゆる角度からアイデアを吸収できるかが鍵となります。 ここでは、制作の見本にしたい31点のWebサイトを選んでいます。 Webマニアがざわついた最新Webデザインまとめ Don’t Board Me わずかに揺れるかわいい犬のイラストからはじまる、犬の散歩代行サービスのWebサイト。ピンクと青のパステルカラー配色や、巨大サンセリフ書体、犬好きに刺さるイラスト画によって親しみやすい雰囲気に。 NEWPEACE ページを開いた瞬間に表示されるイラストアニメーションも素敵ですが、スクロールをはじめると同
当ブログで行ったGoogle Fontsの読み込み最適化を紹介します。CLSを大幅に改善できたので個人的にはこれが最適解だと思っています。 結論いきなり結論ですが、次のHTMLのhrefの値を使用しているGoogle Fontsのそれに変更し、head内で読み込んでください。 <link rel="preconnect" href="https://fonts.googleapis.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='
アクセシビリティ? ウチの会社のウェブサイトは大丈夫なの──。 法改正によって、障害のある方への「合理的配慮の義務化」が、2024年4月1日をもって民間企業にも適用されることを受け、ウェブデザイン分野ではアクセシビリティ対応の機運が高まっています。 とはいえ、「法改正で何が変わったのかよく分からない」「ウェブアクセシビリティってどうすれば対応できるの?」といった疑問を持つ方も少なくないはず。そこで、この記事ではいわゆる「法的義務化」の潮流を解説しつつ、アクセシビリティの基本を押さえていきます。 アクセシビリティの考え方は、ウェブに限るものではありません。他のプラットフォームでのソフトウェアデザインや物理的なモノや空間のデザインにおいても、普遍的に重要な視点です。ぜひ、この機会に一緒に学んでいきましょう! なぜ「ウェブアクセシビリティ」に注目が集まっているのか? まず前提として触れておきたい
私は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
「デザイナーだけがデザインをする時代は古い」「デザインにセンスはない」と語るのは、Udemyの「UI/UXの改善を進めるための基礎講座」などで人気を誇る、UI/UXデザイナーの濱野将氏。生成AI時代において、デザインをビジネスをつなげるためのポイントや、UI/UXの基礎を解説します。 UI/UXデザイナーが教えるデザインの基本 濱野将氏:それでは、僕からは「ビジネスを実現する『デザイン』の基本」をお話しさせていただきます。よろしくお願いします。 今日のアジェンダはこんな感じです。「デザインの必要性」「デザイナーだけがデザインする時代はもう古い」「UI/UXについて」。今回はAIがテーマなので「AIを使ったプロジェクトの進め方」も少し紹介させていただきたいなと思っております。 簡単に自己紹介をさせてください。株式会社IMAKE代表の濱野と申します。職業はUI/UXデザイナーで、講師もさせてい
自作の、地道で普通の内容のベンチマークを走らせてみたら、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
開発の流れとして、デザイン決定後にデザイン(Figma)が開発部隊に渡ってくることは多いと思います。 開発着手前にデザインについて確認しておいた方が良いことの備忘です。 サンプル画像はWebで作っていますが、内容としてはWebに限らず、iOS/Android Nativeなアプリも対象としています。 また、記載順をどうしようか迷ったのですが、特に体系だった説明もできないので思いついた順で書いています。 アイコン/画像について 画像の形式を確認しましょう 画像の形式はベクター画像(SVG)なのか、ラスター画像(PNGなど)か確認します。 アイコン系は基本的にベクターだと思いますので、SVGでExportできない場合はデザイン提供元に確認しましょう。 ラスター画像は要件上こだわりがなければ、開発側でWebP/JPEG/PNGなどの特性や稼働環境を鑑みて決定するで問題ないと思います。 スマホでは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く