TAK / Web Creator.

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

TAK / Web Creator.

Webデザイン&マークアップ&フロントエンドをしていたWeb制作者 → 自社開発サービスのフロントエンドエンジニア | Webに関する技術ネタからライフハックまで幅広く投稿 | 有料記事が多めです

  • コラム

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

    個人的におすすめしたいアレコレを掲載しています。

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

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

  • 固定された記事

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

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

500
TAK / Web C…

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

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

      TAK / Web C…

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

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

        100
        TAK / Web C…

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

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

          100
          TAK / Web C…
        • 固定された記事

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

        TAK / Web Creator.

        マガジン

        • コラム
          2本
        • 僕がおすすめする〇〇まとめ
          2本
        • 個人的に実践しているWebデザインガイドラインまとめ
          7本

        記事

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

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

          TAK / Web C…

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

          TAK / Web Creator.

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

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

          TAK / Web C…

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

          TAK / Web Creator.

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

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

          TAK / Web C…

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

          TAK / Web Creator.

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

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

          TAK / Web C…

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

          TAK / Web Creator.

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

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

          TAK / Web C…

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

          TAK / Web Creator.

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

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

          TAK / Web C…

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

          TAK / Web Creator.

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

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

          TAK / Web C…

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

          TAK / Web Creator.

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

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

          TAK / Web C…

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

          TAK / Web Creator.

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

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

          TAK / Web C…

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

          TAK / Web Creator.

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

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

          TAK / Web C…

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

          TAK / Web Creator.