Webサイト制作のワークショップ」のメモです。

必要最低限のアプリだけを入れているので、そのほとんどがスタンダードなものです。Web制作に使える便利アプリをいくつか紹介します。

enjoy!

おすすめアプリ

  • 1Password
    パスワード管理アプリ。
    WS|セキュリティ意識とパスワード管理
  • Amazon Drive
    Amazon のクラウドストレージサービスの公式アプリ。
    Amazon Drive でストレージをクラウド化して、外付けハードディスクを持たない化計画
  • AppCleaner
    アプリをアンインストールするときに、関連する設定ファイルなども一緒に削除できる。
  • Astropad
    iPad に Mac のディスプレイをミラーリングすることで、液晶タブレットとして使えるようになる。Apple Pencil で手書きが可能。
  • Atom
    コーディングに使用するエディタ。
    ATOM|インストールと基本的な設定
  • Butler
    多機能なランチャー。「Control+P」で Photoshop をアクティブにしたり、「Control+F」で Google検索ウインドウを表示させたり自由にショートカットを追加できる。一度使うと手放せないアプリ。
  • Flux
    iPhone の Night Shift と同じ機能を Mac にも追加できる。日が沈むとブルーライトカット。
  • Google 日本語入力
    「きょう」と打って「2017-01-30」に変換できるのがポイント。Macデフォルトの日本語入力では「2017/01/30」「2017年1月30日」などに変換ができるけどハイフンつなぎはない。
  • ImageOptim
    png を圧縮するために使用。
  • Jedit X
    Mac OS 9 の時代から Mac を使っている人には懐かしいテキストエディタ。ずいぶん昔に買ったけどいまだに当時のライセンスが使えているし、アップデートもこまめに行われている。テキストのソートや、タブ→スペース変換、行頭の空白文字を削除、半角→全角、漢字をひらがなに変換などに使用。
  • MAMP
    ローカルサーバー環境を構築するために使用。
    MAMPでMacのローカルにサーバー環境を構築する
  • OpenOffice
    他のアプリでは開けない Office(Excel/Word/PowerPoint)ファイルを開いたり、csvを編集するために使用。
  • Paparazzi!
    1画面に収まらない長い1ページのスクリーンショットを一発で撮るために使用。
  • SiteSucker
    FTP でアクセスできないWebサイトのデータを一括でダウンロードするために使用。第三階層までなど、階層を指定してのダウンロードが可能。
  • Slack
    最近イケイケなビジネス向けチャット。必要な場合のみ使用。
  • Transmit
    FTP/SFTP/Amazon S3/WebDAV に対応したFTPアプリ。
  • Ulysses
    Mac デフォルトのメモ.appを高機能にしたようなテキストエディタ。背景色やテキストカラーなどスタイルも変更できる。Markdown記法でマークアップできるので、ブログを書くときに使用。
  • WinArchiver Lite
    Macの不可視ファイルを削除してzipしてくれる。Macで圧縮したzipファイルをWindowsで解凍しても、不要なファイルが発生しない。
  • ZIPANG
    Windows/Mac間でzipファイルをやりとりする際、文字コード自動変換してファイル名の文字化けを解消してくれる。
  • その他|Finderでリネーム
    Finder に備わったリネーム機能。Finder で複数のファイルを選択して「Control+クリック」で表示される「○項目の名前を変更…」を選択する。ファイル名の前後にテキストを追加したり、連番でナンバリングなどができる。

制作系アプリ

Webデザイン/グラフィックデザイン

  • Photoshop|Webデザインや画像処理
  • Illustrator|グラフィックデザインや素材制作
  • Lightroom|写真の現像
  • InDesign|エディトリアルデザイン

Web制作

  • Dreamweaver|コーディング時に複雑な table を作成するために使用
  • Animate|HTML5 アニメーション作成
  • Character Animator|キャラクターアニメーション作成
  • Experience Design|Webサイトのプロトタイプ作成

動画制作

Adobe系

  • Premiere Pro|動画編集
  • After Effects|動画編集
  • Media Encoder|動画エンコード

Apple系

  • Final Cut Pro X|動画編集
  • Motion|動画編集
  • Compressor|動画エンコード

動画編集アプリは Adobe系と Apple系を何度も行き来していて、いまは Apple系を使っている。1080/60p や 4K/30p の編集を行う場合、Premiere はプレビューでもたつくことがあるけど、Final Cut Pro はびっくりするくらいサクサク動いてくれる。Premiere に不具合があるのと、Final Cut Pro が Mac に最適化されていることの両方が影響しているように思う。

音楽制作

  • Logic Pro X|音楽制作

こちらの関連記事もあわせてどうぞ!

    WS|Webデザインのおすすめ本

    「Webサイト制作のワークショップ」のメモです。 WebサイトのUI(ユーザーインターフェイス)デザインには、ビジュアルで感性に訴えかける「ビュー」と、ページ移動などのナビゲーションを行う「コントロ…

    WS|コーディング 1

    「Webサイト制作のワークショップ」のメモです。 頭で理解するよりも手で覚えることが大切。たとえば普段使っている Photoshop のショートカットを口で説明しようとすると、すぐには出てこない。手…

    WS|PhotoshopでWebデザイン

    「Webサイト制作のワークショップ」のメモです。 Photoshop で Webデザインする場合、文字組みや画像配置など、Illustrator でグラフィックデザインをする操作に近い。シェイプレイ…

    WS|WordPressのインストール

    「Webサイト制作のワークショップ」のメモです。 あらゆるWebサイトで CMS(コンテンツ・マネジメント・システム)が導入されており、その中でも WordPress が多くの割合を占める。Word…

    WS|Webサイト制作

    Webサイト制作のワークショップを各所で行いたいと思います 都内某所でWebサイト制作のワークショップをやっています。他にも各所で開催していきたいと思うので、ご興味のある方はよろしくお願いします。何…