TAK / Web Creator.

Webデザイン&マークアップ&フロントエンドをしていたWeb制作者 →…

36 フォロー 2,066 フォロワー

コラム

TAK / Web Creator.

2本
僕がおすすめする〇〇まとめ

TAK / Web Creator.

2本

個人的におすすめしたいアレコレを掲載しています。
個人的に実践しているWebデザインガイドラインまとめ

TAK / Web Creator.

7本

個人的に実践しているWebデザインの理解向上とクオリティの均一化などを目的としたガイドラインです。備忘録として。ちょくちょくコンテンツを追加しています。

固定された記事

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

初の有料noteです。僕個人が厳守しているCSSコーディングのルールから、特に守っておいた方が良いと感じたものを「どうしてそれが良いのか・悪いのか」といった解説も含…

500

TAK / Web Creator.

4年前

1,305

クライアントの言うことを鵜呑みにするなというお話

Twitterを本格的に始めて1年半。タイムラインを眺めていればクライアントからの無茶苦茶だったり奇想天外な要求への愚痴がよく流れてくる。交流会で同業の人と飲んでいて…

TAK / Web Creator.

3年前

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

Webサービスまとめに続いて、僕が個人的に使っているVSCodeのプラグインのまとめです。おすすめしたいプラグインを発見したら随時追加します。更新の保証はしませんが、…

100

TAK / Web Creator.

4年前

350

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

2020年1月時点で僕がブックマークしているデザイン系のWebサービスのまとめです。おすすめしたいデザイン系Webサービスを発見したら随時追加します。更新の保証はしませ…

100

TAK / Web Creator.

4年前

781

フォロワーが増えてきて感じたことと、ツイッターランドを楽しむためのコツとか

技術とは一切関係のない話だけど、最近フォロワーが7000人を超えたので感じたことをつらつらと。 (※2020.01.16追記) フォロワーが10,000人を超えました。 Twitterの僕を…

TAK / Web Creator.

4年前

108

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

あくまで個人的に実践しているデザインのガイドラインです。記事一覧はこちら↓ # モバイル対応モバイルフレンドリー対応を考慮する。高画素密度ディスプレイ（Retin…

TAK / Web Creator.

4年前

172

個人的に実践しているWebデザインガイドライン⑥ デザインカンプ編

あくまで個人的に実践しているデザインガイドラインです。記事一覧はこちら↓ # 基本事項必ずWeb用設定で作成する。カラーモード → RGB 単位 → 定規・文字ともピク…

TAK / Web Creator.

4年前

159

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

あくまで個人的に実践しているデザインガイドラインです。記事一覧はこちら↓ # 基本事項使用するフォント・フォントサイズ・フォントカラーはあらかじめ決めておき統…

TAK / Web Creator.

4年前

196

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

あくまで個人的に実践しているデザインのガイドラインです。記事一覧はこちら↓ # 共通事項画像は可能な限り高解像度のものから使用する。拡大ぼけした画像、ジャギや透…

TAK / Web Creator.

4年前

141

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

あくまで個人的に実践しているデザインのガイドラインです。記事一覧はこちら↓ # レイアウトの基本事項Webサイトは文書。テキストは左から右に読み進める、署名は右寄…

TAK / Web Creator.

4年前

238

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

あくまで個人的に実践しているデザインのガイドラインです。記事一覧はこちら↓ # 基本色の設定あらかじめWebサイトの配色設計を立てて、基本配色と配色の割合を決定し…

TAK / Web Creator.

4年前

214

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

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

TAK / Web Creator.

4年前

629

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

ディレクターがクライアントとやり取りをしてるのを見てて感じるのがSSLの重要性です。おそらくURLが「https://」から始まるくらいのイメージしか無いのでしょう。SSLを…

TAK / Web Creator.

4年前

メンテナンス性の高いCSSコーディングが大切な理由

はじめまして！TAK(@tak_dcxi)と申します。 noteのアカウントを取得して数週間経つのですが、一度も投稿をしていないはずなのにフォロワーが15人もいたのでそろそろ手を出…

TAK / Web Creator.

4年前

175

固定された記事

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

初の有料noteです。僕個人が厳守しているCSSコーディングのルールから、特に守っておいた方が良いと感じたものを「どうしてそれが良いのか・悪いのか」といった解説も含めて30点ほどピックアップしました。文字数は全部で28,000字オーバーと卒論レベルですが、それだけコンテンツは詰まってます。価格は相場をよく知らないのでワンコインで買える500円にしました。（※2019.12.22追記）こちらのnoteですが、リリースから一週間経たずして売り上げが1000部に届きまし

500

クライアントの言うことを鵜呑みにするなというお話

Twitterを本格的に始めて1年半。タイムラインを眺めていればクライアントからの無茶苦茶だったり奇想天外な要求への愚痴がよく流れてくる。交流会で同業の人と飲んでいても、クライアント関連の苦労話やキツイ要求についての話が出ることが多い気がする。そういった話は大抵「プロとしてクライアントの無茶な要求に応えてやったぜー！！」的な武勇伝につながることが多いのだけれど、少し違和感を覚える。それは「クライアントの意見を鵜呑みにして無茶な要求に応えるのがプロなのか？」という点だ。

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

Webサービスまとめに続いて、僕が個人的に使っているVSCodeのプラグインのまとめです。おすすめしたいプラグインを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます（課金した場合のみ通知を受け取れる仕様）。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。 (※2019.11.14 追記)当記事が「はてなブックマーク」テクノロジーカテゴリーの人気エントリーに掲載されま

100

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

2020年1月時点で僕がブックマークしているデザイン系のWebサービスのまとめです。おすすめしたいデザイン系Webサービスを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます（課金した場合のみ通知を受け取れる仕様）。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。 (※2019.11.03 追記)こちらのnoteですが、公式マガジン「#デザイン記事まとめ」に掲載され

100

フォロワーが増えてきて感じたことと、ツイッターランドを楽しむためのコツとか

技術とは一切関係のない話だけど、最近フォロワーが7000人を超えたので感じたことをつらつらと。 (※2020.01.16追記) フォロワーが10,000人を超えました。 Twitterの僕を知らない方向けに、自己紹介のダイジェストをお送りするとこんな感じ。 Twitterを始めたのは今年の1月からだが、6月頃まではフォロワーが300人とか400人くらいだった。何かがキッカケでフォロワーが増えた。基本的にはデザインのことや技術のことを発信している、とても真面目なアカウ

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

あくまで個人的に実践しているデザインのガイドラインです。記事一覧はこちら↓ # モバイル対応モバイルフレンドリー対応を考慮する。高画素密度ディスプレイ（Retina）対応を考慮する。回線速度や通信量を意識する。サイズの重い画像や動画などの乱用は避ける。ギガ泥棒なWebサイトは直帰率が高くなることを意識する。 Android 4系は対応していないCSSやCSS関連のバグが多い。ラジオボタンやテキストリンクはスマホではタップしにくいので、どのデバイスでも操作

個人的に実践しているWebデザインガイドライン⑥ デザインカンプ編

あくまで個人的に実践しているデザインガイドラインです。記事一覧はこちら↓ # 基本事項必ずWeb用設定で作成する。カラーモード → RGB 単位 → 定規・文字ともピクセル(px) 基本解像度 → 72dpi 解像度については以下の記事が分かりやすいと思った。僕は現在はXDでデザインカンプを作ってますが最近までPhotoshopでした。そのため、Photoshopでの作業環境を意識したデザインガイドラインになると思います…。 # レイヤー名は必ず整理する

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

あくまで個人的に実践しているデザインガイドラインです。記事一覧はこちら↓ # 基本事項使用するフォント・フォントサイズ・フォントカラーはあらかじめ決めておき統一感をもたせる。文章の頭位置を揃え、他の要素とのベースラインも揃える。文章の周囲に適度な余白をつけ文章を読みやすく。行間を揃えて適切に開ける。日本語文章は左揃えが基本。コピーライト表記や署名などの一般慣習的な場合を除き、基本的に右揃えの文章は使用しない。中央揃えは利用場所を考慮する。見出しなどの短

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

あくまで個人的に実践しているデザインのガイドラインです。記事一覧はこちら↓ # 共通事項画像は可能な限り高解像度のものから使用する。拡大ぼけした画像、ジャギや透かしの残った画像、画質が粗すぎる画像の利用は禁止。画質は統一する。画像によって解像度が違いすぎるようなことは避ける。ロゴやアイコンなどのプリミティブな素材は可能な限りSVGで作成する。写真のトーンは適切に補正する。撮影したままの写真は極力使わない。有料素材サイトの画像を使用する場合は、ライセンス面

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

あくまで個人的に実践しているデザインのガイドラインです。記事一覧はこちら↓ # レイアウトの基本事項Webサイトは文書。テキストは左から右に読み進める、署名は右寄せなど、文法にも配慮した配置を心掛ける。コンテンツの重要度と優先度を考慮してデザインする。情報の位置関係に注意を払う。重要なコンテンツは目立たせる。ユーザーはWebサイトを読み飛ばして見ることが多い。周囲のコンテンツとの距離やコントラストを変えると引き立てやすい。関連するコンテンツはグループとして認

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

あくまで個人的に実践しているデザインのガイドラインです。記事一覧はこちら↓ # 基本色の設定あらかじめWebサイトの配色設計を立てて、基本配色と配色の割合を決定した上でデザインをする。基本配色とはベースカラー・メインカラー・アクセントカラーの3種。＜ベースカラー＞全体のイメージの基盤となる色。背景や余白などに利用し、ユーザーにどういった印象を与えたいかで選定する。可読性を高めるために明度が低い無彩色を使用することが多い。メインカラーの明度を上げた色をベースカラ

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

こんにちは！ Twitterでは技術的なツイートばかりしていて技術者からフォローされたり仲良くさせていただいたりしていることが多いのですが、よくよく考えたら僕の肩書きはWebデザイナーでした。せっかくならデザイナーっぽいnoteも書きたいということで備忘録として個人的に実践しているデザインガイドラインを長々と書いていこうかなと。基本的には以下のツイートに注釈をつけて説明したものとなります。記事が長くなるのでパート毎に記事を分けてます。【注意書き】 - 僕がn

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

ディレクターがクライアントとやり取りをしてるのを見てて感じるのがSSLの重要性です。おそらくURLが「https://」から始まるくらいのイメージしか無いのでしょう。SSLを導入しなくてもサイトは見れるため、導入する意義が分からないのだと思われます。有料のSSL証明書の導入を提案しようものなら「そんなよく分からんモノに金なんて払いたくない！」ってなるでしょう。僕もSSLを知らなかったらそう感じます。 SSLを導入する一番の理由とは？SSLを導入する大きな理由はセキュ

メンテナンス性の高いCSSコーディングが大切な理由

はじめまして！TAK(@tak_dcxi)と申します。 noteのアカウントを取得して数週間経つのですが、一度も投稿をしていないはずなのにフォロワーが15人もいたのでそろそろ手を出さないとなーと思いながら書いております。今後もnoteを投稿していこうとは思っておりますが、僕が投稿するnoteは基本的に自分自身への備忘録のつもりで書いています。今回のnoteもあくまで自分の感想の紹介であり、世間一般の考え方とは違うものも含まれます。あくまで参考としてご覧いただけますと

マガジン

コラム

僕がおすすめする〇〇まとめ

個人的に実践しているWebデザインガイドラインまとめ

記事一覧

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

クライアントの言うことを鵜呑みにするなというお話

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

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

フォロワーが増えてきて感じたことと、ツイッターランドを楽しむためのコツとか

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

個人的に実践しているWebデザインガイドライン⑥ デザインカンプ編

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

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

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

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

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

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

メンテナンス性の高いCSSコーディングが大切な理由

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

クライアントの言うことを鵜呑みにするなというお話

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

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

フォロワーが増えてきて感じたことと、ツイッターランドを楽しむためのコツとか

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

個人的に実践しているWebデザインガイドライン⑥ デザインカンプ編

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

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

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

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

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

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

メンテナンス性の高いCSSコーディングが大切な理由