サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
掃除・片付け
note.com/tak_dcxi
# レイアウトの基本事項Webサイトは文書。テキストは左から右に読み進める、署名は右寄せなど、文法にも配慮した配置を心掛ける。 コンテンツの重要度と優先度を考慮してデザインする。情報の位置関係に注意を払う。 重要なコンテンツは目立たせる。ユーザーはWebサイトを読み飛ばして見ることが多い。周囲のコンテンツとの距離やコントラストを変えると引き立てやすい。 関連するコンテンツはグループとして認識できるような配置にする。 一貫性のあるデザインを作成する。一貫性のないデザインは開発を遅らせるだけではなく、ユーザーの混乱も招いてしまう。 セクションの区切り方や境界の見せ方に拘る。内容に応じ、階層をつけたデザインにする。 デザインをする時は常にコーディングのことも考える。攻めたレイアウトを作ることは容易だが、それがちゃんとデバイスやブラウザで表示されるかはどうかは別問題。 いくらかっこいい見た目でもコ
初の有料noteです。 僕個人が厳守しているCSSコーディングのルールから、特に守っておいた方が良いと感じたものを「どうしてそれが良いのか・悪いのか」といった解説も含めて30点ほどピックアップしました。 文字数は全部で28,000字オーバーと卒論レベルですが、それだけコンテンツは詰まってます。価格は相場をよく知らないのでワンコインで買える500円にしました。 (※2019.12.22追記)こちらのnoteですが、リリースから一週間経たずして売り上げが1000部に届きました。皆様ありがとうございます。 先週リリースしたnoteが一週間経たずして売り上げ1000部突破いたしました。思いがけず大変なご好評をいただきまして、ありがとうございます。https://t.co/Pj1tOGTlh5 pic.twitter.com/xfP08jfF1p — TAK (@tak_dcxi) December
Webサービスまとめに続いて、僕が個人的に使っているVSCodeのプラグインのまとめです。 おすすめしたいプラグインを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます(課金した場合のみ通知を受け取れる仕様)。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。 (※2019.11.14 追記)当記事が「はてなブックマーク」テクノロジーカテゴリーの人気エントリーに掲載されました。ありがとうございます。 昨日投稿した「僕がおすすめするVSCodeのプラグインまとめ」がはてなブックマークのテクノロジーの人気エントリーに掲載されました。ありがとうございました。うれぴまる。#notehttps://t.co/w1pg7J3gfDhttps://t.co/LzHQfdYReZ — TAK (@tak_
2020年1月時点で僕がブックマークしているデザイン系のWebサービスのまとめです。 おすすめしたいデザイン系Webサービスを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます(課金した場合のみ通知を受け取れる仕様)。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。 (※2019.11.03 追記)こちらのnoteですが、公式マガジン「#デザイン 記事まとめ」に掲載されました。ありがとうございます。
# 基本色の設定あらかじめWebサイトの配色設計を立てて、基本配色と配色の割合を決定した上でデザインをする。 基本配色とはベースカラー・メインカラー・アクセントカラーの3種。 <ベースカラー> 全体のイメージの基盤となる色。背景や余白などに利用し、ユーザーにどういった印象を与えたいかで選定する。可読性を高めるために明度が低い無彩色を使用することが多い。メインカラーの明度を上げた色をベースカラーに使用するのも定番。 <メインカラー> カンパニー・カラーなど、テーマとなるような一番主張させたい色。ロゴやキービジュアル、メインコンテンツなど、ユーザーに対して主張させたい部分に使用する。 <アクセントカラー> その名の通りユーザーにより注目させたい箇所や見落として欲しくないポイントに用いる、その名の通りアクセントとなる色。ベースカラーやサブカラーとは色相や彩度が異なった色を選択することが多い。 メ
こんにちは! Twitterでは技術的なツイートばかりしていて技術者からフォローされたり仲良くさせていただいたりしていることが多いのですが、よくよく考えたら僕の肩書きはWebデザイナーでした。 せっかくならデザイナーっぽいnoteも書きたいということで備忘録として個人的に実践しているデザインガイドラインを長々と書いていこうかなと。 基本的には以下のツイートに注釈をつけて説明したものとなります。 個人的webデザイン暗黙のルール。備忘録として ・黒は #000 だと濃度が強すぎるため非推奨 ・白もできれば #fff を使わない ・原色は使わない。三原色は特にNG。必ず彩度を調整した色を使う ・色は使い過ぎない。多くて4色 ・色の割合はベース70メイン25サブ5程度で構成 — TAK (@tak_dcxi) July 20, 2019 記事が長くなるのでパート毎に記事を分けてます。 【注意書き
# 基本事項 使用するフォント・フォントサイズ・フォントカラーはあらかじめ決めておき統一感をもたせる。 文章の頭位置を揃え、他の要素とのベースラインも揃える。 文章の周囲に適度な余白をつけ文章を読みやすく。行間を揃えて適切に開ける。 日本語文章は左揃えが基本。コピーライト表記や署名などの一般慣習的な場合を除き、基本的に右揃えの文章は使用しない。 中央揃えは利用場所を考慮する。見出しなどの短いテキストに用い、長い文章ではなるべく中央揃えを使わない。 視覚に障害がある方は細身の多いフォントは読みづらい。アクセシビリティ対策として文字のウェイトには気を配る。 画像として使用するテキストは適宜アウトライン化する。 長いテキストリンクを連続して使用しない。 文章の区切りをハッキリさせる。 無意味な改行は厳禁。 # フォント フォント選びは賢く、要件やWebサイトの雰囲気に合ったものを選ぶ。 フォント
個人的に実践しているWebデザインガイドライン① デザイン基本事項編 こんにちは! Twitterでは技術的なツイートばかりしていて技術者からフォローされたり仲良くさせていただいたりしていることが多いのですが、よくよく考えたら僕の肩書きはWebデザイナーでした。 せっかくならデザイナーっぽいnoteも書きたいということで備忘録として個人的に実践しているデザインガイドラインを長々と書いていこうかなと。 基本的には以下のツイートに注釈をつけて説明したものとなります。 記事が長くなるのでパート毎に記事を分けてます。 【注意書き】 - 僕がn
はじめまして!TAK(@tak_dcxi)と申します。 noteのアカウントを取得して数週間経つのですが、一度も投稿をしていないはずなのにフォロワーが15人もいたのでそろそろ手を出さないとなーと思いながら書いております。 今後もnoteを投稿していこうとは思っておりますが、僕が投稿するnoteは基本的に自分自身への備忘録のつもりで書いています。 今回のnoteもあくまで自分の感想の紹介であり、世間一般の考え方とは違うものも含まれます。あくまで参考としてご覧いただけますと幸いです。 # なぜ丁寧なCSS設計が求められるのか? 簡単に言えば以下の点です。 - 保守性・メンテナンス性が向上する - 複数人でコーディングを行う際に作業がスムーズに行える - スケールの大きなwebサイトに対応しやすくなる まず、「保守性・メンテナンス性が向上する」という点ですが、これはめちゃくちゃ大切です。 Web
このページを最初にブックマークしてみませんか?
『TAK / Web Creator.|note』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く