マガジンのカバー画像

WEB勉強

21
運営しているクリエイター

記事一覧

🐛よくハマったFlexboxのバグまとめ

🐛よくハマったFlexboxのバグまとめ

Flexbox はレイアウトを組むのに非常に便利ですが、バグがとても多いことでも有名です。最新のブラウザでも次々と新しいバグが報告されており、すベてを紹介するのは大変なので、自分がよくハマったバグをまとめます。

なお、ベンダープレフィックスは省略しているので注意してください。

flex-flow: column wrap; がはみ出るdisplay プロパティに inline-flex を指定

もっとみる
サービスの個性や「らしさ」を表現する、デザインのトーンとマナー

サービスの個性や「らしさ」を表現する、デザインのトーンとマナー

こんにちは!はのめぐみです。キッチハイクというサービスでプロダクトデザイナをしています。

約1年ほど前から、キッチハイクのデザインに関する取り組みを「ことばのデザイン」や「デザインシステム」の記事で発信してきたのですが、ついにキッチハイクのトーンとマナーを明文化しました!🎉🎉

今回も、その内容を紹介していこうと思います💪

スライド資料を公開しています
この資料では、チームがプロダクトの

もっとみる
僕がCSSを書く際に必ず意識している CSSのコーディングルール30条

僕がCSSを書く際に必ず意識している CSSのコーディングルール30条

初の有料noteです。

僕個人が厳守しているCSSコーディングのルールから、特に守っておいた方が良いと感じたものを「どうしてそれが良いのか・悪いのか」といった解説も含めて30点ほどピックアップしました。

文字数は全部で28,000字オーバーと卒論レベルですが、それだけコンテンツは詰まってます。価格は相場をよく知らないのでワンコインで買える500円にしました。

(※2019.12.22追記)こ

もっとみる
デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント

デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント

webやアプリのUIデザイン上達のコツとして、模写(コピー)がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践!となった時に多くの学びを活かせたと記憶しています。

そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところ

もっとみる
【保存版】ブクマしておくべきサイト24選

【保存版】ブクマしておくべきサイト24選

今回は、Webデザイナー、コーダーを目指している方は、ブックマークしておくべきサイトをご紹介します!

■ コリスみなさん、ご存知の方も多いのではないでしょうか。
コリスさんです。

何と言っても、情報量がすごい!
私も、お世話になってます!WEBデザイナー、コーダー目指す方はブクマ必須ですね!

■ PHOTOSHOPVIPこちらも、有名なPHOTOSHOPVIPさん。

Photoshopや

もっとみる
個人的に実践しているWebデザインガイドライン④ 画像編

個人的に実践しているWebデザインガイドライン④ 画像編

あくまで個人的に実践しているデザインのガイドラインです。

記事一覧はこちら↓

# 共通事項画像は可能な限り高解像度のものから使用する。拡大ぼけした画像、ジャギや透かしの残った画像、画質が粗すぎる画像の利用は禁止。

画質は統一する。画像によって解像度が違いすぎるようなことは避ける。

ロゴやアイコンなどのプリミティブな素材は可能な限りSVGで作成する。

写真のトーンは適切に補正する。撮影した

もっとみる
僕がおすすめするVSCodeのプラグインまとめ

僕がおすすめするVSCodeのプラグインまとめ

Webサービスまとめに続いて、僕が個人的に使っているVSCodeのプラグインのまとめです。

おすすめしたいプラグインを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます(課金した場合のみ通知を受け取れる仕様)。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。

(※2019.11.14 追記)

もっとみる
僕がおすすめするデザイン系Webサービスまとめ

僕がおすすめするデザイン系Webサービスまとめ

2020年1月時点で僕がブックマークしているデザイン系のWebサービスのまとめです。

おすすめしたいデザイン系Webサービスを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます(課金した場合のみ通知を受け取れる仕様)。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。

(※2019.11.03

もっとみる
個人的に実践しているWebデザインガイドライン① デザイン基本事項編

個人的に実践しているWebデザインガイドライン① デザイン基本事項編

こんにちは!

Twitterでは技術的なツイートばかりしていて技術者からフォローされたり仲良くさせていただいたりしていることが多いのですが、よくよく考えたら僕の肩書きはWebデザイナーでした。

せっかくならデザイナーっぽいnoteも書きたいということで備忘録として個人的に実践しているデザインガイドラインを長々と書いていこうかなと。

基本的には以下のツイートに注釈をつけて説明したものとなります

もっとみる
個人的に実践しているWebデザインガイドライン⑦ その他重要事項編

個人的に実践しているWebデザインガイドライン⑦ その他重要事項編

あくまで個人的に実践しているデザインのガイドラインです。

記事一覧はこちら↓

# モバイル対応
モバイルフレンドリー対応を考慮する。

高画素密度ディスプレイ(Retina)対応を考慮する。

回線速度や通信量を意識する。サイズの重い画像や動画などの乱用は避ける。ギガ泥棒なWebサイトは直帰率が高くなることを意識する。

Android 4系は対応していないCSSやCSS関連のバグが多い。

もっとみる
個人的に実践しているWebデザインガイドライン③ レイアウト編

個人的に実践しているWebデザインガイドライン③ レイアウト編

あくまで個人的に実践しているデザインのガイドラインです。

記事一覧はこちら↓

# レイアウトの基本事項Webサイトは文書。テキストは左から右に読み進める、署名は右寄せなど、文法にも配慮した配置を心掛ける。

コンテンツの重要度と優先度を考慮してデザインする。情報の位置関係に注意を払う。

重要なコンテンツは目立たせる。ユーザーはWebサイトを読み飛ばして見ることが多い。周囲のコンテンツとの距離

もっとみる
個人的に実践しているWebデザインガイドライン⑤ テキスト編

個人的に実践しているWebデザインガイドライン⑤ テキスト編

あくまで個人的に実践しているデザインガイドラインです。

記事一覧はこちら↓

# 基本事項
使用するフォント・フォントサイズ・フォントカラーはあらかじめ決めておき統一感をもたせる。

文章の頭位置を揃え、他の要素とのベースラインも揃える。

文章の周囲に適度な余白をつけ文章を読みやすく。行間を揃えて適切に開ける。

日本語文章は左揃えが基本。コピーライト表記や署名などの一般慣習的な場合を除き、基

もっとみる
【コラム】 WebサイトのSSL化が大切な理由を説明する

【コラム】 WebサイトのSSL化が大切な理由を説明する

ディレクターがクライアントとやり取りをしてるのを見てて感じるのがSSLの重要性です。

おそらくURLが「https://」から始まるくらいのイメージしか無いのでしょう。SSLを導入しなくてもサイトは見れるため、導入する意義が分からないのだと思われます。

有料のSSL証明書の導入を提案しようものなら「そんなよく分からんモノに金なんて払いたくない!」ってなるでしょう。僕もSSLを知らなかったらそう

もっとみる
個人的に実践しているWebデザインガイドライン② 配色編

個人的に実践しているWebデザインガイドライン② 配色編

あくまで個人的に実践しているデザインのガイドラインです。

記事一覧はこちら↓

# 基本色の設定あらかじめWebサイトの配色設計を立てて、基本配色と配色の割合を決定した上でデザインをする。

基本配色とはベースカラー・メインカラー・アクセントカラーの3種。

<ベースカラー>
全体のイメージの基盤となる色。背景や余白などに利用し、ユーザーにどういった印象を与えたいかで選定する。可読性を高めるため

もっとみる