SlideShare a Scribd company logo
Web制作のためのおすすめツール
自己紹介 
Evangelist 04 
よつばデザイン 後藤賢司 
東京と大分の2拠点で活動中。 
出版社~デザイン会社~Web制作会社~企画会社~独立。 
根っこから考えるタイプのお仕事が得意。 
ブランド立ち上げ、メディアサイトの企画・運営など。 
企業Webサイトの企画・デザイン。
活動 
WP-D グリーン 
CPIエバンジェリスト 
ゼロから始めるWordPress勉強会 (facebookグループ) 
Webクリエイターのための情報交換所 (facebookグループ) 
Webクリエイターズニュース 
すみだクリエイターズクラブ
COCOmag 
子どもと一緒の毎日を 
楽しく、可愛くする情報 
(メディアサイト) 
http://COCOmag.net
よろずサウンド 
著作権フリーのBGM販売サイト 
yorozusound.com
著書 
電子書籍版も 
あります。
Webクリエイターズニュース 
Web制作者に 
役立つ情報を発信。 
http://web-cre.info/
打ち合わせ 
写真素材 
アイコンフォント 
原稿作成 
フレームワーク 
プロトタイプ
打ち合わせ
ホワイトボード 
NUボード(ホワイトボード) 
構成を組立る際に活用 
修正がすぐ出来るので 
クライアントに参加してもらって試行錯誤。
写真素材
The Stocks 
著作権フリーの写真サイト 
UNSPLASH・LITTLE VISUALS 
NEW OLD STOCK・SUPER FAMOUS 
GRATISOGRAPHY・GETREFE 
JAY MANTRI・MAGDELINE 
BREAKING PIC・TRAVEL COFFEE 
http://thestocks.im/ 
※今回のスライド写真はほぼここから利用
VSCOcam 
画像加工アプリ 
良い感じの写真に加工。 
iOS、Android対応 
http://vsco.co/vscocam
Waterlogue 
水彩タッチに加工するiOSアプリ。 
素材写真がしょぼすぎる時の緊急対 
策として使えるかもしれない。 
! 
https://itunes.apple.com/jp/app/ 
waterlogue/id764925064?mt=8
アイコンフォント
FontAwesome 
アイコンは既存のものを 
うまく活用する方向。 
種類が多く使いやすい。 
http:// 
fortawesome.github.io/Font- 
Awesome/
1600+ iOS7 Vector Icons 
ラインの細いアイコンフォント。シャープなイメージが欲しい時やス 
マホサイト用に。$69~ 
http://www.streamlineicons.com/
原稿作成(文章)
Mou 
マークダウンエディタ
Write 
マークダウンエディタ。タグでまとめられる。
フロントエンドフレームワーク
Bootstrap 
HTML、CSS、javascript。SassやLessにも対応。
Animate.css 
CSSアニメーションのセット
Dash 
様々なドキュメント参照ツール。 
有料版は表示にタイムラグが無い。 
http://kapeli.com/dash
プロトタイプ
構成を決めたらプロトタイプ作成
Blocks 
コンポーネント単位でページを作 
成。 
http://www.mightydeals.com/ 
deal/blocks.html? 
fid=77e283db 
http://demo.bootstraptor.com/ 
blocks.html
Briqs 
BootstrapベースでHTMLを作成。 
これをベースにして 
作り込んでいくのもアリ。
ありがとうございました。

More Related Content

PDF
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
PDF
フリーランスに必要な “リサーチスキル”と仕事の作り方
PDF
クライアントと同じ方向を向くという事
PDF
WordPressカスタム投稿とカスタム分類を使ってみよう
PDF
第10回ゼロからはじめるWordPress勉強会(初心者向け)
PDF
2015年のWebを考える
PDF
プロトタイプ時代の
WordPressテーマの作り方・考え方
PDF
第11回ゼロから始めるWordPress勉強会
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
フリーランスに必要な “リサーチスキル”と仕事の作り方
クライアントと同じ方向を向くという事
WordPressカスタム投稿とカスタム分類を使ってみよう
第10回ゼロからはじめるWordPress勉強会(初心者向け)
2015年のWebを考える
プロトタイプ時代の
WordPressテーマの作り方・考え方
第11回ゼロから始めるWordPress勉強会

What's hot (20)

PDF
WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
PDF
これが長崎生まれ長崎育ち!スーパーお問い合わせフォーム MW WP Form だ!+ α
PDF
私をWordCampに巻き込んだ「しいたけ占い」
PDF
WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識
PDF
WordCamp Tokyo 2015 リアルフォーラム
PDF
コミュニティ立ち上げのときに本当にあった恐い話
PDF
『ライターと制作者のメディアの作り方』WordCamp Tokyo2015
PDF
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
PDF
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
PDF
僕のFireworks普及計画!!
PDF
自分のこれからについて語るときに僕の語ること Webディレクターのための弁証法入門-
PDF
サービス業から学んだコミュニケーションのコツ
PDF
concrete5を使って分かった、WordPressのいいところ
PDF
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
PDF
Adobe Illustratorによる WordPressテーマ作成ワークフロー
PDF
ユーザーにやさしい管理画面をつくるために。テーマ制作者ができること 初級編【WordCamp Kansai 2014】
PDF
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
PDF
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン
PDF
Designer Meets Bootstrap(22th Knock!)
PDF
WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?
WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
これが長崎生まれ長崎育ち!スーパーお問い合わせフォーム MW WP Form だ!+ α
私をWordCampに巻き込んだ「しいたけ占い」
WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識
WordCamp Tokyo 2015 リアルフォーラム
コミュニティ立ち上げのときに本当にあった恐い話
『ライターと制作者のメディアの作り方』WordCamp Tokyo2015
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
僕のFireworks普及計画!!
自分のこれからについて語るときに僕の語ること Webディレクターのための弁証法入門-
サービス業から学んだコミュニケーションのコツ
concrete5を使って分かった、WordPressのいいところ
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
Adobe Illustratorによる WordPressテーマ作成ワークフロー
ユーザーにやさしい管理画面をつくるために。テーマ制作者ができること 初級編【WordCamp Kansai 2014】
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン
Designer Meets Bootstrap(22th Knock!)
WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?
Ad

More from kenji goto (13)

PDF
フリーランスデザイナーとクライアントとのつきあい方
PPTX
デザインしないデザイナーになる
PDF
デザイン・制作をはじめる前に
取り組む事
PDF
デザインの「時間と距離感」の考え方
PDF
デザイナーの考えている事
PDF
Webデザインのこれからを考える
PDF
webクリエイターのための情報交換所sp(2015年半期決算)
PDF
制作効率化のための素材探しと情報収集術
PDF
プロトタイプとWebサイト設計のワークフロー
PDF
Webサイトの設計を考えてみよう(前半)
PDF
コードを書かずにレイアウトが出来る WordPress の Page Builder プラグイン
PDF
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
PDF
Bootstrap
フリーランスデザイナーとクライアントとのつきあい方
デザインしないデザイナーになる
デザイン・制作をはじめる前に
取り組む事
デザインの「時間と距離感」の考え方
デザイナーの考えている事
Webデザインのこれからを考える
webクリエイターのための情報交換所sp(2015年半期決算)
制作効率化のための素材探しと情報収集術
プロトタイプとWebサイト設計のワークフロー
Webサイトの設計を考えてみよう(前半)
コードを書かずにレイアウトが出来る WordPress の Page Builder プラグイン
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
Bootstrap
Ad

Web制作のためのおすすめツール