- 運営しているクリエイター
記事一覧
🐛よくハマったFlexboxのバグまとめ
Flexbox はレイアウトを組むのに非常に便利ですが、バグがとても多いことでも有名です。最新のブラウザでも次々と新しいバグが報告されており、すベてを紹介するのは大変なので、自分がよくハマったバグをまとめます。
なお、ベンダープレフィックスは省略しているので注意してください。
flex-flow: column wrap; がはみ出るdisplay プロパティに inline-flex を指定
【保存版】ブクマしておくべきサイト24選
今回は、Webデザイナー、コーダーを目指している方は、ブックマークしておくべきサイトをご紹介します!
■ コリスみなさん、ご存知の方も多いのではないでしょうか。
コリスさんです。
何と言っても、情報量がすごい!
私も、お世話になってます!WEBデザイナー、コーダー目指す方はブクマ必須ですね!
■ PHOTOSHOPVIPこちらも、有名なPHOTOSHOPVIPさん。
Photoshopや
個人的に実践しているWebデザインガイドライン④ 画像編
あくまで個人的に実践しているデザインのガイドラインです。
記事一覧はこちら↓
# 共通事項画像は可能な限り高解像度のものから使用する。拡大ぼけした画像、ジャギや透かしの残った画像、画質が粗すぎる画像の利用は禁止。
画質は統一する。画像によって解像度が違いすぎるようなことは避ける。
ロゴやアイコンなどのプリミティブな素材は可能な限りSVGで作成する。
写真のトーンは適切に補正する。撮影した
僕がおすすめするVSCodeのプラグインまとめ
Webサービスまとめに続いて、僕が個人的に使っているVSCodeのプラグインのまとめです。
おすすめしたいプラグインを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます(課金した場合のみ通知を受け取れる仕様)。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。
(※2019.11.14 追記)
僕がおすすめするデザイン系Webサービスまとめ
2020年1月時点で僕がブックマークしているデザイン系のWebサービスのまとめです。
おすすめしたいデザイン系Webサービスを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます(課金した場合のみ通知を受け取れる仕様)。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。
(※2019.11.03
個人的に実践しているWebデザインガイドライン① デザイン基本事項編
こんにちは!
Twitterでは技術的なツイートばかりしていて技術者からフォローされたり仲良くさせていただいたりしていることが多いのですが、よくよく考えたら僕の肩書きはWebデザイナーでした。
せっかくならデザイナーっぽいnoteも書きたいということで備忘録として個人的に実践しているデザインガイドラインを長々と書いていこうかなと。
基本的には以下のツイートに注釈をつけて説明したものとなります
個人的に実践しているWebデザインガイドライン⑦ その他重要事項編
あくまで個人的に実践しているデザインのガイドラインです。
記事一覧はこちら↓
# モバイル対応
モバイルフレンドリー対応を考慮する。
高画素密度ディスプレイ(Retina)対応を考慮する。
回線速度や通信量を意識する。サイズの重い画像や動画などの乱用は避ける。ギガ泥棒なWebサイトは直帰率が高くなることを意識する。
Android 4系は対応していないCSSやCSS関連のバグが多い。
個人的に実践しているWebデザインガイドライン③ レイアウト編
あくまで個人的に実践しているデザインのガイドラインです。
記事一覧はこちら↓
# レイアウトの基本事項Webサイトは文書。テキストは左から右に読み進める、署名は右寄せなど、文法にも配慮した配置を心掛ける。
コンテンツの重要度と優先度を考慮してデザインする。情報の位置関係に注意を払う。
重要なコンテンツは目立たせる。ユーザーはWebサイトを読み飛ばして見ることが多い。周囲のコンテンツとの距離
個人的に実践しているWebデザインガイドライン⑤ テキスト編
あくまで個人的に実践しているデザインガイドラインです。
記事一覧はこちら↓
# 基本事項
使用するフォント・フォントサイズ・フォントカラーはあらかじめ決めておき統一感をもたせる。
文章の頭位置を揃え、他の要素とのベースラインも揃える。
文章の周囲に適度な余白をつけ文章を読みやすく。行間を揃えて適切に開ける。
日本語文章は左揃えが基本。コピーライト表記や署名などの一般慣習的な場合を除き、基
【コラム】 WebサイトのSSL化が大切な理由を説明する
ディレクターがクライアントとやり取りをしてるのを見てて感じるのがSSLの重要性です。
おそらくURLが「https://」から始まるくらいのイメージしか無いのでしょう。SSLを導入しなくてもサイトは見れるため、導入する意義が分からないのだと思われます。
有料のSSL証明書の導入を提案しようものなら「そんなよく分からんモノに金なんて払いたくない!」ってなるでしょう。僕もSSLを知らなかったらそう
個人的に実践しているWebデザインガイドライン② 配色編
あくまで個人的に実践しているデザインのガイドラインです。
記事一覧はこちら↓
# 基本色の設定あらかじめWebサイトの配色設計を立てて、基本配色と配色の割合を決定した上でデザインをする。
基本配色とはベースカラー・メインカラー・アクセントカラーの3種。
<ベースカラー>
全体のイメージの基盤となる色。背景や余白などに利用し、ユーザーにどういった印象を与えたいかで選定する。可読性を高めるため