【図解で納得】レスポンシブデザインのブレイクポイントの細かすぎる新解釈 [2022年更新版] - webのあれこれ
※前回の2020年12月からベゼルレスのiPad mini6（8.3インチ）が出たので更新しています。 記事の詳細の内容はiPad mini6が入っていない内容です。 MacBookもM1チップでProじゃなくてAirで十分みたいになっていて、大きさやスペックが大きければいいみたいな時代は終わって、自分に合ったものを選ぶ人がより増えてきたように感じています。 前回が2019年5月にレスポンシブデザインのブレイクポイントの記事を書いて、今でもたくさんのアクセスがあり、たいへん嬉しく思っています。 そこで今回2021年に向けて内容を見直しました。 最近発売されたベゼルレスのiPad AirやiPhone12 miniなど新しいサイズも増えて、より複雑になった印象です。 iPadのSplit Viewを気にしない人は、去年と同じ560px/960pxでも問題はないです。 hashimotosan
![【図解で納得】レスポンシブデザインのブレイクポイントの細かすぎる新解釈 [2022年更新版] - webのあれこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/69fd58e599edd140a8c7e26e7058d9122c7ed7a1/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhashimotoblog%2F20201207%2F20201207184733.png)
最新の手法でブラウザのタブに表示される「Favicon(ファビコン)」を作成するとこうなる
ブラウザのタブやブックマークに表示される「Favicon(ファビコン)」は、ウェブサイトを印象づける重要な要素です。そんなファビコンを作成しウェブサイトに表示させる最新の方法について、フロントエンドエンジニアのAndrey Sitnik氏が解説しています。 How to Favicon in 2021: Six files that fit most needs — Martian Chronicles, Evil Martians’ team blog https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs ファビコンは2000年代初頭に生まれたコンセプトで、インターネットに公開するウェブサイトはファビコンを備えているべきだとSitnik氏は主張。しかし、ウェブサイト
あなたの組織でデザイン指標が使えない理由とその対策
デザイン指標を作っても失敗するパターン プロダクトを通してユーザーに価値提供できたか評価するためにデザイン指標は欠かせない存在です。書籍を読むなどして学習すれば指標は作れるようになりますが、その指標を使って Web サイトやアプリなどのデジタルプロダクトを評価し、改善するような体制を作るのは簡単なことではありません。 そもそもユーザーに価値提供できているかを評価することが、プロダクトに携わるデザイナーや開発者の評価に結び付いていない場合があります。現場では「ユーザーに価値提供したい」という気持ちで仕事をしていたとしても、自身とプロダクトの評価と結び付いていなければ、ただ指標を計測しているだけになります。 デザイン指標との相性が良くないのは、プロダクトを作る人たちの評価が売上目標に直結している組織です。 そういう組織では、ユーザーの課題解決ではなく、いかに売りやすくするかを優先しがちです。特
【2018年版】Webサイトのファビコンや各種アイコンの正しい設定方法 | Web Design Trends
Webサイトにファビコン（favicon）を設定しておくことで、ブラウザのタブやGoogleの検索結果にアイコンが表示されるようになります。 今回は、2021年現在のファビコン（favicon）の設定方法とおすすめの作成ツールについてご紹介したいと思います。 ファビコン（favicon）とは？ ファビコンとは、Webページごとに設定されるブラウザのタブなどに表示されるアイコンのことです。 PCのブラウザでWebサイトを開くと、タブごとにサイト名の隣にアイコン画像が表示されますが、その画像はWebページ側で指定したアイコンが表示されるようになっていて、ブラウザでの見た目が分かりやすくなるだけでなく、Webサイトのブランディングやイメージ作りにも影響を与えます。 ファビコンは、主に下記の箇所に表示されます。 必ずファビコンを設定しないといけないわけではありませんが、ファビコンが設定されていない
デザインをスケールしていくための役割分担
数だけのデザインチームは『弱い』インハウスデザイナーの数が少ない組織だとあらゆるコトができる方がいたほうが早く動けます。プロダクトはもちろんプロモーションやマーケティング用の成果物も作りますし、ディレクションに近いことをする場合もあります。小さなチームだとワークフローもシンプルですし、周りが何をしているかも Chatwork や Slack を眺めていればだいたい把握できるので身軽に早く動けることが重要になります。 しかし、組織が大きくなるとあらゆることが同時進行します。そこでデザインのスケール化が必要になるわけですが、小さかった頃と同じように「作る」に関わるあらゆる作業ができる人を求めている組織も少なくありません。 野球、サッカーのようなチームスポーツは良い例だと思いますが、それぞれが明確な役割をもってプレイをしています。デザインも同じようにポジションを明確にしてチームを作り上げていくべ
Gridlover
Gridlover Establish a typographic system with modular scale & vertical rhythm. Try Gridlover No signup, always free Fiddle with the font size, line height and scale factor sliders and watch the typography dance. You'll get it right away, we promise! The app loads faster than a demo video would, so just go ahead and try it. What is vertical rhythm? Read Compose to a vertical rhythm. What is modular
ウェブデザイナー必見！美しいCSSグラデーションをコピペできる無料ツール17選まとめ
デザインでもっとも頭を悩ますことの多い「配色えらび」。配色を決まらずに、時間だけが過ぎてしまったという経験のあるひとも多いでしょう。 そんなときは、無料で使えるオンラインツールを利用してみましょう。今回は、グラデーションカラーに特化し、CSSコードも手軽にコピペできるツール17個をまとめてご紹介します。2018年のデザイントレンドをうまく反映したカラーリングだけでなく、お好みのグラデーションカラーも手軽に作成することができ、ウェブデザイン制作の時間短縮につながります。 ウェブデザイナー必見！美しいCSSグラデーションをコピペできる無料ツールまとめ Grabient ウェブサイトやグラフィックデザインに利用したくなる美しいグラデーションカラーを現在25種類揃え、お好みで色をカスタマイズ、作成できる無料の配色作成ツールです。 ボタンをクリックするだけで、Internet Explorer や
Figma: The Collaborative Interface Design Tool
Downloads Get the desktop, mobile, and font installer apps
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
Design Collaboration, Version Control & Handoff - Sympli
"Sympli has significantly improved our coordination around designs, enabling designers, product managers and engineers to work together much more seamlessly. It allows our engineers to build confidently to specifications, and allows our design team to easily share out their vision. It’s a vital part of our product development workflow!" Tom Wilson Principal Engineer
デザインドキュメンテーションにある制作と共有の課題
ドキュメンテーションのための３つの課題 Web サイトデザインはもちろん、アプリデザインでも画面ではなく部品から始めるほうが有効です。画面ごとで制作していくと、いつの間にか一貫性を失うことがありますし、様々なスクリーンサイズに対応するためのルールを後付けにすると、結局またやり直しになってしまうこともあります。 では、インターフェイスを一度見直してスタイルガイド（パターンライブラリ）を作り始めれば良いのかというと、それほど単純は話ではありません。私の中で以下の 3 つの課題があると考えています。 人とコトの課題 – これはワークショップを通して指摘しましたが、ステークホルダーによって優先順位が違えば、指している要素の呼び名が違うことがあります。制作側視点だけで作ると思わぬ誤解が発生する可能性があります。 共有の課題 – 様々な企業が自社フレームワークを Web で公開しているのを見ても分かる
Pixelapse - Visual version control for designers
Automatic Version Control & Backup Pixelapse automatically keeps track and securely backs up your files every time you save.
これで無料とはすごい！Mac, Win, Linux対応、デザインの指示書やスタイルガイドを簡単に作成・共有できる -Zeplin
デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketchでの下準備 Zeplin ソフトウェア版 for OS X Zeplin ブラウザ版 for OSX, Win, Linux Zeplinのインストール Zeplinの特徴 Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア（無料）とオンラインサービス（無料と有料）です。 無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。
エンジニアがデザインに取り組んでわかったこと
最近、いくつかのデザインに取り組んでわかったことがあるので、書いておこうと思う。 ぼくは2,3年前にこの業界に入ってからずーっとフロントの実装畑でやってきた。 それは自分の意図していたものではなかったけど、前職のまぼろしという会社は実装が強みの会社だったので、デザインに触れることはほぼほぼなかった。 それもあってか、ぼくは「もうちょっとコストを考慮してほしい」「このあしらいが一体ユーザーにいくらのお金を落とさせるんだろう」とか、あげくの果てには「実装のことを考えたデザインをすべき」とまで考えていた。これらの考え方はぼくだけでなく、コーダーからよく同様の声が上がっている。 だけどデザイナーさんと接する機会が増えるごとに、デザインができるようになったら今までイラついていたことがどんな風に見えるのか確かめたいな、という気持ちになった。 それ以外にも「なにか作るとデザイナーばかり褒められて厳しい」
成果が出るサイトにするために改善すべき10のポイントを紹介 | LISKUL
「サイトを作成したが、思っていたよりも成果が出ていない」「どこからサイトを改善すればいいかわからない」とお悩みの担当者の方が多いのではないしょうか。 成果の出るサイトにしたい場合、まずは段階を踏んで改善をしていく必要があります。 今回はサイト改善で成果を出すためのポイント10選と、活用するべきツールを紹介します。 サイトを改善するためのポイント10選今回は貴社のサイトの成果を改善するためのポイントとして、視覚的なポイントと思考的なポイントに分けて、10のチェックポイントをご共有します。 以下の資料では、2万件以上のデータベースから最短30秒でサイト改善案を手に入れられるツールについてまとめています。無料ですので、ぜひダウンロードしてご覧ください。 サイトのコンバージョン率を改善するためのノウハウを、自動提案してくれるツール「dejam」 1. Webサイトの構成は、一般的なパターンか結論か
ウェブサイトのリニューアル時にチーム全員、クライアントとも確認しておきたい4つの大切なポイント
他のサイトがしてるからフラットにしたり、スクロール前提の長いページを使ってみたり、トレンドは確かにかっこよく魅力的に見えるかもしれません、しかし本当にそれが自分のサイトに適しているのか検討することが非常に大切です。 制作者だけでなくクライアントともしっかりと確認しておきたい、ウェブサイトをリニューアルする際に陥りがちな4つの間違いを紹介します。 4つとも大切ですが、特に3つ目は大きなプロジェクトになるほど重要ですね。 Top Mistakes When Redesigning a Website 下記は各ポイントを意訳したものです。 翻訳・画像の掲載にあたっては、Onextrapixelの許可を得ています。 はじめに：リニューアルの結果に1/3が満足していない 1. トレンドをむやみに取り入れる 2. 自分のデザインの殻に固執する 3. 具体的な期限と手順を決めない 4. 一度にまとめてリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Grid.Guide — Pixel Perfect Grids
「成長しているショップ」には“売れる”喜びを知ったデザイナーがいる | ECサイト研究最前線
SiteOrigin Background Generator
skan.in
