そうとう楽！WEB制作、ビジネスを助ける「テンプレート」まとめ

• 作成：2013/02/25
• 更新：2014/11/01
• Webサービス

急に仕事をふられたけど

いちから作っている時間はない
だけど、素早く「それなり」に見せたい

見ているだけでデザインの参考になりそうなテンプレートや、無駄な作業を大幅になくすWebサービスを、用途ごとに分けてまとめました。

もくじ
１．企画書 / 請求書 / 履歴書 / 退職願 / プレゼン
２．パワーポイント
３．エクセル
４．フライヤー / ポスター / チラシ / ロゴ
５．名刺
６．文章 / 手紙
７．Web制作 / ホームページ
８．Webデザイン
９．HTML/CSS

企画書 / 請求書 / 履歴書 / 退職願 / プレゼン

• フォームに入力するだけで、整形された紙面(PDF)が完成
  職務経歴書テンプレート一覧 - ルーシッド職務経歴書
• マイクロソフトに入社した人の履歴書ひな形
  英文履歴書の書き方
• 退職願 / 用紙 / 封筒 / 書式や出し方
  退職願の正しい書き方【理由・例文・書式】 - NAVER まとめ
• 請求書を作るWebサービス
  請求書の作成・管理、テンプレートからの請求書作成 | 請求書.jp
• コカコーラの企画書はシンプルでとても魅力的
  ネットで見れるすごい企画書 - NAVER まとめ
• 議事録作成のポイント
  誠 Biz.ID：…「使える議事録」に仕上げるチェックリスト
• ビジネステンプレート合計約14,000点を無料でダウンロード
  bizocean（ビズオーシャン）
• インフォグラフィック / 無料ベクター素材を30個
  …テンプレート素材30個まとめ - Photoshop VIP
• DM / 見積り / 督促（催促） / 依頼 / 価格通知 / 招待 / 礼状
  英文メール・レター・手紙の書き方・例文サイト
• お詫びの書き方 / 冒頭 / 説明 / 締め
  気まずいシーン…：日経ウーマンオンライン

パワーポイント

• ビジネス / チャート / Office Mac / Microsoft
  PowerPointテンプレートサイトいろいろ | DesignWalker
• Microsoft謹製のパワポの無料テンプレート
  マイクロソフト…PowerPointの… +150 (BlogPeople Blog)
• パワーポイント(powerpoint)のデザインがいろいろ検索できる
  パワーポイントのデザインやレイアウト… | IDEA*IDEA
• 資料によるプレゼン力を高めるためのテンプレート集
  プレゼンのためのパワーポイント… | DesignDevelop

エクセル

• Excel / PowerPoint / グラフ
  ExcelとPowerPointの綺麗なグラフ… : ライフハッカー［日本版］
• 業務別 / 用途別 / メール
  Excel(エクセル)、Word(ワード)のテンプレート集
• シンプルな家計簿ならこれ
  年間収支を網羅するExcel家計簿テンプレート…- 凹レンズ（旧館）
• 自分の事業計画書
  人生計画表を作ろう…| ライフハック | Cross Mode Life
• Excelのテンプレートで文書を簡単に作成する方法
  エクセルのテンプレートでサクサク…：日経ウーマンオンライン

フライヤー / ポスター / 漫画 / 作曲

• 小説 / 作文 / 漫画 / 作曲 / 手帳 / メモ帳
  方眼紙や原稿用紙、五線紙も…- はてなブックマークニュース
• タスク / カレンダー / ガンチャート
  カレンダー・TODOリスト・ガントチャート…| コリス
• 手帳のひな形
  DIYNOTE - クリアホルダーで作る自分だけのオリジナル手帳
• デザインの参考にも：チラシ / フライヤー / ポスター / パンフレット
  チラシ（フライヤー）・ポスター・パンフレットデザイン…まとめ
• 封筒の雛形
  定型サイズも簡単 プリンタ…- はてなブックマークニュース
• 同僚 / 上司 / 外国人 / 子供への伝言に
  無料で印刷できる「伝言メモ」 - はてなブックマークニュース
• 切り取り線・折れ線に従うだけで完成する
  Googleマップ封筒「MapEnvelope」 : ライフハッカー［日本版］
• Tumblrテンプレで音楽CD特設サイトを作る
  Tokusetsu - 同人音楽CD特設サイト…Tumblrテンプレート
• Evernoteテンプレート
  Evernote作れる「KustomNote」 | あなたのスイッチを押すブログ

名刺

• Photoshopでデザインのよい名刺作成
  カッコいい名刺を作成…Photoshop用テンプレート50 - K'conf
• 名刺テンプレートやツール
  名刺を自作したい…テンプレートやツールいろいろ - かちびと.net
• 印刷可能な名刺デザイン
  印刷可能な名刺デザイン…「Cursive Q」 - GIGAZINE

文章 / 手紙

• 書式 / 文例 / 雛形 / 素材 / クリップアート
  雛形、フォーマット…｜書式の王様-bizocean(ビズオーシャン）
• 手紙でデートの誘い
  プライベートの文例…（縁談・恋愛（往信、返信）） - 日本郵便
• 穴埋めすれば誰でも書ける
  文章の型稽古→穴埋めすれば誰でも書ける…/ beyond readers
• 契約書等の法律文書のまとめ
  契約書など法律文書の文例
• お歳暮 / お中元 / お祝い / 結婚祝い / 出産祝い / お見舞い
  お礼状、案内状、手紙の書き方と例文
• 三つ折り / 楽しい折り方など
  A4用紙もキレイに三つ折り…- はてなブックマークニュース

Web制作

• 見積書 / 細かい数字も参考になる
  わかりやすい見積書の書き方 / Maka-Veli .com
• Web制作を高速化するためのテンプレ
  » 僕がWeb制作…スターターテンプレート :: Creatorish
• ワイヤーフレーム / 紙でアナログ感を出せる
  クライアント満足度がアップする７つのウェブデザインシート
• WordPress / 導入からデザイン、プラグイン、カスタマイズまで
  WordPressの導入からデザイン、プラグイン、カスタマイズまで全部まとめ | 販促まとめ
• Web制作に関する便利ツール / Webサイトデザイン
  時間の節約になるWeb制作関連ツール 12+1 | Webクリエイターボックス
• Android / フォトギャラリーやパズル、電子ブック
  プログラミング不要…Androidアプリが無料で作れる『Free Android App Maker』 | 100SHIKI
• iPhoneやiPad / アイコン用Photoshop
  iPhoneやiPadのホーム画面向けアイコン作成用のPSDテンプレート・App Icon Template - かちびと.net

Webデザイン

• レイアウト / テンプレートとツール
  美しいバランスを生み出す黄金比…-The Golden Grid | コリス
• サイトのパーツ / 初めてのweb制作では相当使えるまとめ
  人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ！ | Chrome Life
• PSD / 企業、プロダクト、個人ブログ、ポートフォリオ、写真サイト
  デザインが苦手な人、すぐに使いたい人にぴったりなウェブページ・ワイヤフレーム用のPSD素材 -Layout Lab | コリス
• Bootstrap / googleやMetro 風テーマ
  ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&有料まとめサイト - 酒と泪とRubyとRailsと
• HTMLメール / スマホやPCにも対応
  レスポンシブデザインにも対応したHTMLメールテンプレート集 | IDEA*IDEA

HTML/CSS

• HTML5 / 雛形、jQuery, Modernizrなどのスクリプト、CSSのリセット
  わずか数秒で自分用のHTML5のテンプレート一式を作成するオンラインサービス -Initializr | コリス
• HTML/CSS テンプレート集
  HTML/CSS テンプレート集まとめ - Life like a clown
• シンプルなHTML5用のテンプレート
  HTML5をはじめる人、勉強したい人用のテンプレートファイル -Easy HTML5 Template | コリス
• CSSレイアウトをダウンロード
  様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」 | DesignDevelop
• デザイン性の高い整ったフリーCSSテンプレート
  デザインが整ったフリーCSSテンプレート集「20 Beautiful Free CSS Web Templates」 | DesignDevelop

以上、webデザインや名刺、ロゴパンフレットに至るまで、いざという時に大幅に時間を短縮できるテンプレートまとめでした。デザインのよいサイトをドラッグ＆ドロップで簡単に作成出来るwebサービスはこちらです。

• 3

2014/11/10

知っておくと便利！あのサイトでさりげなく使われていたCSS小技集

2014/12/01：続編である「最近のサイトで使われていたCSS小技集」を書きました。 今回はCSSのみで実現できるもの、動きあるエフェクトやこれから使用頻度が高く

2016/11/28

CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10

ここ最近画像や動画を使ったエフェクトも増えてきましたが、シンプルにテキストだけ動かしたりデコレーションすると結構洗練された見え方になります。もちろん画像や動画の上に動きのある文

2016/08/1

CSSのみで実現させる、すごいアニメーションやフレームワークまとめ

CSSのみでおしゃれなアニメーションを付与できるフレームワークやライブラリ。新しいものだけでなく、少し古いけど使えそうなものも掘り起こしてまとめました。 画像

2016/12/19

PhotoshopやCSSを使い、背景だけを薄くしてデュオトーン加工する方法

デュオトーンを採用したアーティスティックなWebサイトも増えてきたことですし、今回は「写真全体をデュオトーンに加工するのではなく、人物と背景の透過度を変えてデュオトーン加工を施