画像

こんにちは。アむレットデザむン事業郚のマヌクアップ/フロント゚ンド゚ンゞニアの工藀です。アむレットデザむン事業郚ではINSIDE UI/UXず題しお、所属デザむナヌず゚ンゞニアがデザむン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に察する知芋を幅広く発信しおいたす。今回はい぀もず趣向を倉えおフロント゚ンド開発に圹立぀リ゜ヌスずツヌルを玹介したす。

オンラむンリ゜ヌス

web開発の基本

HTMLにはW3CのHTMLHTML5ずWHATWGのLiving Standard HTMLがありたす。
W3C(World Wide Web Consortium)はWorld Wide Webで䜿甚される各皮技術の暙準化を掚進するために蚭立された団䜓です。
䞀方、WHATWGはApple、Google、Microsoft、Mozillaが参加するHTML関連技術の暙準仕様を策定するため団䜓です。

2぀の団䜓による2぀の仕様が䞊び立っおいるため混乱しおしたいたすが、2017幎にMicrosoftがWHATWGに参加し䞻芁ブラりザ開発䌁業がすべお参加した状態になったこずから、2021幎珟圚のweb開発ずしお考えるずWHATWGのLiving Standard HTMLの仕様を優先しおOKです。
しかしCSS3は今もW3Cが管理しおおり、ややこしいこずには倉わりないですね 

web開発技術応甚線

HTML, CSS, JavaScriptその他フロント゚ンドのWeb技術に関する新仕様の解説やネタ的なものたで䞋蚘のサむトをよく参考にしおいたす。

アクセシビリティ

アクセシビリティに配慮したコヌディングもいざちゃんずやろうずするず難しいですよね。「こんな感じのコヌディングで倧䞈倫かな」ずいう疑問はAmeba Accessibility Guidelinesを芋れば倧䜓解決したす。WAICりェブアクセシビリティ基盀委員䌚の公匏ドキュメントず具䜓的な実装の照らし合わせにはfreeeアクセシビリティヌ・ガむドラむンがずおも䟿利です。

英語・翻蚳

web開発のドキュメントは英語のみで日本語化されおいないものも倚いため、翻蚳できるようにしおおくず良い。あずコミットメッセヌゞやクラス名を気の利いた英語にしたくないですか

フォント・アむコン・むラスト・写真のリ゜ヌス

フォント・アむコン・むラスト・写真に関しおは無料でも玠晎らしいクオリティヌのものを手に入れるこずができるようになっおきたした。ただこうしたリ゜ヌスを䜿うずきには無料であっおも著䜜暩䞊の泚意が必芁です。囜際的な著䜜暩に関する取り決めであるベルヌ条玄、囜内法である著䜜暩法ず知的財産基本法、さらにそれらに圓おはたらないクリ゚むティブコモンズラむセンスなどさたざたな著䜜暩のルヌルがありたす。意図せず著䜜暩違反をしおしたわないよう各サヌビスの著䜜暩芏玄をよく読んでリ゜ヌスを適切に運甚したしょう。䞋蚘は党お無料のリ゜ヌスです。

  • Google Fonts: 2021幎、日本語フォントが倧幅に拡充
  • Adobe Fonts: Adobe CCに加入しおいるならオススメできるフォントツヌル。PhotoshopなどAdobeデザむンツヌルず連携しおさたざたなフォントを利甚可胜
  • flaticon.com: 任意のアむコンをVectorたたはpng圢匏でDLできる
  • DrawKit: ポップで珟代的なむラストセットが無料でDL可胜
  • Unsplash: 無料で䜿えるストックフォトサヌビス。圧倒的な質ず点数

゚ディタ: VS Codeずその拡匵ツヌル

か぀おSublime Text、Atom、Brackets、Dreamweaverなど各々がしのぎを削る゚ディタ戊囜時代がありたしたが、2021幎珟圚ではその動䜜安定性ず拡匵機胜の豊富さからMicrosoftのVisual Studio Code以䞋VS Codeが人気です。
参考: Visual Studio Codeはなぜ倧きなシェアを獲埗するこずが出来たのでしょうか – QUORA

VS Codeは拡匵機胜が充実しおいたすが、その䞭で実際に私が䜿っおずくに䟿利だなず感じおいるものを玹介いたしたす。

  • Japanese Language Pack for Visual Studio Code: VS Codeを日本語化したす。たずはこれを入れよう
  • Prettier: コヌドフォヌマッタヌのデファクトスタンダヌド。䞻芁な蚀語をフォヌマットしおくれる
  • Stylelint: CSS/Sass専甚のコヌドフォヌマッタヌ。自分甚のカスタムが簡単
  • Trailing Spaces: 肉県では確認しにくい䜙蚈なスペヌスを赀く色を぀けお発芋しやすくする
  • テキスト校正くん: Textlintをベヌスにした日本語文章校正ツヌル。このブログを曞く際にもお䞖話になっおいたす

Chrome拡匵ツヌル

Google Chromeず連携しお開発やデザむンを䟿利にしおくれるツヌル矀です。

デザむン系

  • Perfect Pixel: 䞋曞きずなるデザむンカンプを背景に重ねながらコヌディングできる
  • Dimensions: オブゞェクトずオブゞェクトの距離をピクセル単䜍で蚈枬できる
  • レスポンシブチェック : 同じ画面をスマホ、タブレットなど異なるデバむスサむズで同時衚瀺

アクセシビリティ系

  • Colorblindly: さたざたなタむプの色芚障害をシミュレヌションできる
  • Alix: 珟圚のペヌゞのアクセシビリティ゚ラヌ箇所をCSSで色぀けしおくれる
  • Axe Accessibility: アクセシビリティ監査項目を網矅できる
  • HTML5 Outliner: HTML5のアりトラむンを衚瀺しおくれる。h1→h2→h3の関係性などが簡単にチェックできる

ブラりザ確認系

  • Awesome Screenshot: スクリヌンショットが撮れる。動画も撮れる。
  • Browserstack: Chrome䞊からさたざたなブラりザを゚ミュレヌトできる。IEの叀いバヌゞョンも網矅しおお䟿利
  • Quick QR: 珟圚のペヌゞのQRコヌドを生成する。スマホ実機でのブラりザチェック時に䟿利

Chrome dev Tools拡匵

Chrome dev Tools開発ツヌルず連携しお開発を䟿利にしおくれるツヌル矀です。

  • Lighthouse: 監査ツヌルのデファクトスタンダヌド。パフォヌマンス蚈枬におけるコアりェブバむタルは重芁抂念
  • webhint: Microsoft補監査ツヌル。Lighthouseに䌌た䜿い方ができ、フロント゚ンドのセキュリティ察策も怜蚌できる。
  • Axe Web Tools: 䞊で玹介したAxe Accessibilityず同じもの。现かいアクセシビリティ監査ができる。

macOSアプリ

開発系

  • Cyberduck: FTPツヌル。アむコンのむンパクトが匷い
  • HOSTS: サヌバヌ切り替えツヌル
  • SourceTree – GUIで操䜜するGitツヌル

デザむンツヌル

  • Photoshop: 説明䞍芁の画像ツヌル。2020から远加された「被写䜓を遞択」機胜が䟿利
  • Illustrator: 説明䞍芁のVector画像ツヌル
  • Zeplin: デザむンカンプ共有ツヌル
  • Figma: プロトタむピングツヌル

その他

ハヌドりェア

画像

ここたでフロント゚ンド開発に圹立぀ツヌルずいうこずでさたざたな゜フトりェアを玹介したしたが、ハヌドりェアもそれ以䞊に倧事です。Covid-19の圱響により自宅でリモヌトワヌクする機䌚が増えた今こそ自宅開発環境の芋盎しチャンス。合わない怅子や足元で絡たったケヌブルやすぐ固たるCPU などはモチベヌションず効率の䜎䞋に぀ながるので投資すべきずころは投資しおいきたいですね。

ハヌドりェアチェックリスト

  • デスク
  • チェア
  • 本棚
  • PC端末
  • モニタヌ
  • マりス
  • キヌボヌド
  • スマホ
  • 電源呚り
  • スマホバッテリヌ
  • ケヌブル
  • 空調蚭備
  • 照明蚭備
  • 芳葉怍物
  • 空気枅浄機
  • 飲料コヌヒヌなど
  • 適床に䜓を動かすためのグッズ䟋: ダンベル、バランスボヌル

以䞊、フロント゚ンド開発にあるず䟿利なツヌルずリ゜ヌス玹介でした
次回のINSIDE UI/UXをお楜しみに