HTMLのマークアップをしているとき、設計で迷うときってありますよね。
例えば、「ここってspanタグがいいの?」「mainタグってここで使っていいの?」とか、マークアップしてるといろいろ悩むことは出てきます。
そういうとき、まずはHTML5のリファレンスを見ますが、その他、メガベンチャーや大企業など技術的に信頼できる企業/サービスのWebサイトのHTMLの書き方をよく参考にしています。
このエントリでは、HTMLの書き方(設計的な意味を含む)に悩んだり、迷ったときに参考にしたいWebサイトをまとめてみます。
コーポレートサイト
コーポレートサイトや、コーポレートサイトに近い設計のサイトを作るときに参考になるサイトです。
大きな資本を持つ企業はコーポレートサイトのユーザビリティに力を入れているケースが多いので、そういった大企業やテック系企業のコーポレートサイトをよく見ています。
なお、思いついた順に書いているので、順序は適当です。
- 株式会社サイバーエージェント
- Apple(日本)
- 日本マイクロソフト – Official Home Page
- 株式会社ABEJA
- Goodpatch グッドパッチ|デザインの力を証明する
- LINE Corporation | ホーム
- 楽天株式会社コーポレートサイト
- 日本製鉄
- トヨタ自動車WEBサイト
- Tencent 腾讯
- マクドナルド公式サイト | McDonald’s Japan
- About Us | Slack
- Manufacturers, Suppliers, Exporters & Importers from the world’s largest online B2B marketplace-Alibaba.com
- 株式会社はてな
- 会社概要 – ヤフー株式会社
メディアサイト
Webメディア系のサイトです。記事の構成など、Webメディア特有のUIを確認する際に参考にします。
- Adobe Blog – アドビの最新情報をお届けする公式ブログ
- ICS MEDIA – Webデザイナー/フロントエンジニアの必読メディア
- 新R25 – 20代ビジネスパーソンのバイブル
- CodeGrid – フロントエンドに関わる人々のガイド
- Medium – a place to read and write big ideas and important stories
- Smashing Magazine — For Web Designers And Developers — Smashing Magazine
- Frontend Masters — Learn JavaScript, React, Vue & Angular from Masters of Front-End Development!
Webサービス、テック系ドキュメントサイト
Webサイトや、それらのサイトに用意されているドキュメントのサイトです。
特に、多くの開発者が見るドキュメントは分かりやすさ、伝わりやすさが第一なので模範的な設計の参考になります。
- 現地の人から借りる家、体験&スポット – Airbnb
- Twitter Developer Platform — Twitter Developers
- Uber
- Firebase
- YouTube について – YouTube
- Instagram Brand Resources
- Contentful: Content Infrastructure for Digital Teams
- Netlify: All-in-one platform for automating modern web projects.
- Nuxt.js – ユニバーサル Vue.js アプリケーション
- React – A JavaScript library for building user interfaces
- Qiita
- はてなブックマーク
その他
最後に
当然といえば当然ですが、技術を売り物にしているテック企業のサイトは信頼度高いです。
あとは、プログラミング言語やフレームワークの公式ドキュメントのサイトも下手なことはできないので、参考になります。
熟練のマークアッパー、エンジニアからするとツッコミどころ多いかもしれません。もし、「これが抜けてる!」みたいなサイトがあれば教えてください。
コメントを残す