休憩時間にサクッと挑戦！

選択問題やドラッグ＆ドロップでできるゲーム感覚な問題いろいろ！

1. HTML/CSS

HTML5実力テスト HTML/CSSコース

「実力テスト」という名のクイズサイト。HTML/CSSコースではHTML5とCSSの基本問題がクイズ形式で出題されます。制限時間は15分。「HTMLやCSSを見てどのように表示されるか？」「smallタグは何を意味するか？」などなど、問題を解きながら勉強になります！

2. CSS

Nettuts+ Quiz #5: CSS Specificity and Cascading

サイト自体は英語で書かれていますが、問題はCSSコードのみで問われるので英語力不要です。以下のHTMLで、問いのCSSを設定した場合、何色で表示されるかのクイズです。「Start Quiz」ボタンをクリックしてスタート。

<div id="main" class="container">
    <p id="foo" class="bar boo">Something clever goes here</p>
</div>

3. JavaScript

Nettuts+ Quiz #3: JavaScript

こちらも同じ英語サイトですが、同様に問題はJavaScriptコードのみなので英語力不要。表示される数値などを答えます。

4. JavaScript

HTML5実力テスト JavaScriptコース

上記「実力テスト」と同じサイトのJavaScriptコース。制限時間は15分。「下記のコードでどのように表示されるか？」「IE9でサポートされていないAPIは？」などなど。

5. 色彩感覚

FM 100 Hue Test

左右にならぶ色相をドラッグして並び替えてグラデーションを作ります。少ないスコアほど色彩感覚が優れています（最高スコアはゼロ）。

6. ベジェ曲線

Shape Type

ベジェ曲線を操作して文字の形を整えるサイト。形のバランス感覚はもちろん、苦手な人も多いベジェ曲線の練習にもなります！Shiftキーを押せば直線に。

7. 文字詰め

Kern Type

文字詰めをゲーム感覚で勉強できる素敵サイト。文字と文字の間のスペースをドラッグか矢印キーで調節します。

英語の問題にもじっくり挑戦！

ここからは英語力も必要なのでちょっと難易度があがります…！英語の勉強にもなりますね！

8. Web総合

The Web IQ Quiz

「Twitterは何文字まで入力できる？」「このWebサービスの創始者は？」などなど、Webにまつわるクイズに30秒以内で答えるクイズサイト。Web総合問題であるQuiz01に答えると、ソーシャル・ゲーム・モバイルなどその他のジャンルのクイズもできるようになります。上の図のように答えが一択という謎の問題もありますｗ

9. CSS基本

Nettuts+ Quiz #1: Beginner CSS

CSSの基礎クイズ。「セレクターの記述方法として、正しくないものは？」「正しくコメントアウトされているのはどれ？」など。

10. jQuery

Nettuts+ Quiz #2: jQuery Basics

jQueryの基礎クイズ。「jQueryって何？」「jQuery.noConflict(true)って何のために使う？」など。

11. Photoshop

Test Your Photoshop Knowledge #1

Photoshopのショートカットキーや操作方法など。PhotoshopのバージョンはCS5です。

12. HTML5

Nettuts+ Quiz #6: How Well do you Know HTML5?

HTML5の基礎クイズ。「HTML5の正しいDOCTYPE宣言の記述方法は？」「HTML5でサポートされていない要素は？」など。

いかがでしたか？私は全てトライしましたが、一番スコアがとれたのは色彩感覚のテストでした（満点！わーい！）。他はもっと勉強しなきゃです…。職場のみんなでわいわいやってみるのも楽しそうですね！

電子書籍ってどんなもの？

電子書籍とは、PC・MacやAppleのiPhoneやiPad、AmazonのKindleなどのディスプレイで読める書籍のこと。書籍はインターネット上で購入、ダウンロードします。ファイルを用意するだけでコンテンツを提供できるので、紙の書籍よりも低コストで手軽に作成できます。デジタル書籍、デジタルブック、Eブックと呼ばれることもあります。（「電子ブック」はソニーの商標）

電子書籍のフォーマット（保存形式）

電子書籍ではおもに下記３つのフォーマットが使われています。

• PDF
• EPUB
• AZW/MOBI（Kindle用）

EPUBがPDFと違うことろは、文字の大きさや文章の折り返しなどをユーザーが変更できるところです。PDFはページ幅が固定ですが、EPUBの場合は端末やユーザーの設定方法によって見え方が変わってきます。そのため、小説や新聞、論文などの「読むこと」がメインの書籍ではEPUBが向いています。PDFに向いているのは「読む」ことより書籍全体を「見せる」必要のある絵本や写真集、雑誌などです。

サンプル電子書籍をダウンロードする

電子書籍って聞いたことあるけど実際に見たことない…という人のために、サンプルを用意しました。といっても作り方を説明するのに作ったもので、内容は前回の記事「もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ」です。はい、あくまでサンプルです！保存して、iOSならiTunesライブラリにドラッグ＆ドロップして同期すると、iBookアプリから見れるようになります。

• ダウンロード（EPUB）
• ダウンロード（PDF）
• ダウンロード（MOBI）

電子書籍を作成しよう！

ひとくちに電子書籍…といってもいろんな方法で作れるようです。簡単な方法を紹介します。

Sigil

「sigil」はWYSIWYG（見たまんま反映しちゃうよ）でEPUB形式の電子書籍を作成できるアプリ。基本的にはWordなどの文書作成アプリと操作方法は変わらないので、難しく考えず作成していけます。

• 無料
• Windows, Mac OS X, Linuxでインストール可
• EPUB形式で保存
• 縦書き非対応
• ルビタグ使用可

試してみた

どんなもんかと、前回の記事「もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ」を電子書籍化してみることに。

文字の装飾や画像の挿入など、本当にWordを使っているような感覚であっという間にできちゃいました。保存すると.epub形式のファイルができあがり。

Tools ＞ Meta Editor から本の情報を入力。

iPadで見てみた。うはっ！すごい！

簡単すぎてびっくりです。より詳しい使い方は「Sigilの使い方」が参考になります。ぜひぜひお試しあれ。

Calibre

「calibre」は電子書籍版iTunesのようなアプリ。電子書籍のファイルをライブラリに追加したり、作者や出版社などの情報を管理・検索ができます。ビューアも内蔵されているのでパソコンからでも快適に電子書籍を読むことができます。

そしてこのアプリを使ってテキストファイルを電子書籍用の形式に変換することができます。.txt形式でもインポートできるので、Windowsのメモ帳で書いた小説を出版…なんてことも可能。これはあくまでコンバーターとして使えるので、上記Sigilのように文章を書いたり編集したり…という使い方はしません。SigilではKindleのAZW/MOBI形式で保存ができないので、Kindle用ファイルを作成したいときにこちらのアプリを使うといいでしょう。

• 無料
• Windows XP, Vista, 7、Mac OS X Leopard〜、Linuxでインストール可
• EPUB, MOBI, PDF形式（他多数）でエクスポート可

試してみた

さきほど作った .epub のファイルをKindle用の .mobi に変換してみます。とりあえずファイルをライブラリーにドラッグ＆ドロップ…。

お、読み込まれました。ファイルを選択した状態で「Convert books」をクリック。

「Output format」で「MOBI」を選んでOK。ライブラリでファイルを右クリックして「Save to disk」を選ぶと各フォーマットでダウンロードできます。

確認してみよう！…と思ったらそういえばKindleを持ってない事を思い出し、Kindle Publishing ProgramsからKindleプレビューアをダウンロード。すると、

こんな感じで表示されました。わーい！

注意したいのが、元ファイルのテキストエンコーティングがUTF-8でないと、日本語フォントは文字化けしてしまうようです。事前に確認しておきましょう。ちなみにこのCalibreではRSS登録しておいたWebサイトを自動的に保存していってくれるそうな。なにやら使い込めば面白そうですね！

パブー

パブーはオンライン上で電子書籍の作成・管理・販売ができるWebサービス。ブログ感覚で作っていくことができます。有料版だとさらに多くの機能を使えるようになります。手数料がかかるものの、このサイトだけで作成〜出版まですべて管理できるのが魅力！

• 無料または有料（現在月額315円：通常525円）
• 動作環境：Internet Explorer 8、Firefox 3、Safari 3、Google Chrome 4
• EPUB, PDF形式で保存
• 商用利用可
• 縦書き非対応
• ルビタグ使用可
• 本の販売金額は10円から3,000円で設定
• 本を販売した場合、売上げ金額の30%が販売手数料として差し引かれる

試してみた

ユーザー登録後、ログインして「本をつくる」をクリック。必要情報を入力したら「本を作成する」

「章の設定」から章（ブログでいうカテゴリー）を追加したり、

ブログ感覚でページを追加したり、

本の販売価格を設定したり。（価格の上限は3000円）

その他、Adobe社のInDesignではEPUB形式で保存することができます。EPUBにこだわらないのであればWordでも、TextEditでもPDF形式で保存できるので、写真を多く使った見せるページが多い場合はPDFの方がいいかもしれませんね。

電子書籍を販売しよう！

パブー以外で作った電子書籍はどうやって販売するのかなー？と探してみると、「個人で電子書籍を出版するために販売サイトを比較」という記事でうまいことまとめられていました。いろんな電子書籍の販売ができるサイトが紹介されています。こちらでおすすめサイト一位に輝いているのが「DL-MARKET」。その記事で比較内容はうまくまとめられているので、確認してみよう…と思ったら、海外からDL-MARKETにうまくアクセスできませんでしたよ。ということで確認できないのでもう丸投げします :P この記事を参考に自分にあった販売サイトを見つけてみてください！

「本を出版」と聞くと難しそうなイメージでしたが、電子書籍だとこのように手軽にできるようになりました。長年思い描いていたお話や、誰かに伝えたい考えもすぐに多くの人に届けることができます。みなさんはどんな本を書いてみますか？

Chromeくん、もうこの顔は見飽きたよ。

Safariのここが素敵！

滑らかな動き

ダブルタップでズームしたり、スワイプで戻る・進むの操作をするジェスチャーの動きは、本当に滑らかで使っていて楽しくなります！iPhone, iPadをお持ちの方には特に使いやすいと思います。これは文章や画像で説明するより、上の動画を見てもらったほうがわかりやすいですね！

リーダー機能

URLの横に表示されるリーダーボタンをクリックすると、広告やCSSを除いた文章のみを表示することができます。そのままメールで送信したり、プリントすることができます。Evernoteに保存するときはリーダー表示して、コマンド＋Aで全選択、コントロール＋コマンド＋VでEvernote保存すれば記事のみを見やすく保存できます。

充実した機能の開発ツール

Safariの「開発」メニューからユーザーエージェントを切り替えたり、画像・CSS・JavaScriptを無効にしたりと、開発者向けの機能が充実しています。

WebインスペクタというデバッグツールでHTMLやCSSを修正し、どのように表示されるかその場で確認することができます。Chromeと同じものですね。

ユーザーエージェントの切り替えも簡単！

英語の勉強にも！

英語サイトを見ているときに辞書でさくっと単語を調べたり、発音の確認をしたりと、英語の勉強にも使えます。ちなみにMac OS自体の言語環境の設定はシステム環境設定 > 言語環境 > 言語 に表示されている「日本語」と「English」をドラッグで入れ替えて英語を先頭にするだけ。ログインし直すと英語環境になっているはず。

3本指で単語をダブルクリックすると辞書でその単語の意味を調べることができます。意外と使える。Macが日本語環境なら日本語の辞書がでると思います。

英語の文章を選択し、二本指タップ or コントロール＋クリックの「読み上げ」をクリックするとその文章を読み上げてくれます。発音の確認やディクテーション、シャドーイングの練習になります。発音も単語と単語のつなぎもとっても自然。システム環境設定 ＞ スピーチ で、 読んでくれる人物まで選べますｗ

リーディングリスト

リーディングリストはRead it laterのような「後で読む」記事をポンポン保存しておける機能です。今のところ他のiPhoneやiPadとの同期はできないようですが、iCloudがリリースされたら同期できるとの噂。楽しみです！

Safariの今一つなところ

URLバーで検索ができない

これはなかなか痛い…。SafariではURLバーと検索バー、２種類があります。Chromeに慣れていたらついURLのところで検索しちゃいますよね。FirefoxだとURLバーでも検索できるのですが、Safariではできませんでした。しょんぼり。また、ChromeではURLバーでURL入力＋Tabキーでサイト内検索できたのですが（例：youtube.com + tab + 検索語句）、これもChromeのみの機能のようです。

やっぱりかつてのChromeの方が速い…

今私のMacの中にいるChromeは、落ちまくりの遅すぎの変な顔のおばかさんですが、Safariと比べると、やはりかつてのChromeのスピードの方が…と思わざるを得ません。うむむ。

入れてみた拡張機能

エクステンションの数はやっぱり Firefox ＞ Chrome ＞ Safari となりますね。エクステンションはまだまだ少なめのSafariですが、上記にもあるようなデベロッパーツール、辞書機能、トップサイトなど、元からついているビルトイン機能がなかなか充実しています。

SafariのエクステンションはSafari Extensions Galleryでインストールできます。また、エクステンション本家サイトからダウンロードする場合は、ダウンロード後検索ボックスの横に表示されるダウンロードアイコンをクリックし、ファイルをダブルクリックするとインストールできます。

ブックマーク同期

Xmarks

Firefox、Chromeでも使っているブックマーク同期ツール。私の中でこれは外せません。

スクリーンショット撮影

Awesome Screenshot

素敵なWebサイトはスクリーンショットを撮って保存しています。ページ全体を撮影するために使っています。

検索をもっと簡単に

Custom Search

検索エンジンやサイトを自由に追加してカスタマイズできます。私の場合、Google各種、Wikipedia（日・英）、Youtube、Icon finder、和英・英和辞書、自分のサイトなど入れてます。Alt+Fで検索ボックスを表示。設定もそこから。選択した文字列を右クリックでも検索できます。ショートカットの設定やシェアボタンの作成もできるので便利！

はてなブックマーク

はてなブックマーク

ブックマーク自体は使っていないので、ブックマーク数、コメントをサクッとチェックするために入れています。

短縮URLを生成

Shortly

開いているページの短縮URLを手軽に生成・コピーできるエクステンション。goo.glをはじめ、いろんな短縮URLが選択できます。

ページタイトルとURLをコピー

TabLinks

開いている全てのタブのページタイトルやURLをコピーできます。ブロガーさんには特におすすめ。貼り付ける形式はカスタマイズできます。

ページ内翻訳

Translate

表示しているWebページをGoogle Translateで翻訳します。設定で翻訳する言語を変更できます。

サイトに使われているCMS・解析ツール等を詳しく表示

BuiltWith

Chromeでも使っていました。表示しているWebページで使われているCMS、機能を表示するエクステンション。ページ内で二本指タップ（もしくはコントロール＋クリック／右クリック）で使えます。「Tweetmeme」「Contact form 7（Wordpressプラグイン）」「Twitter Widget」などなど、細かく表示されます。英語ですが使っているCMS・ツール・ライブラリなどはわかると思います。

画面サイズ変更

ResizeMe

画面のサイズをカスタマイズできます。小さいサイズのブラウザーでの表示確認はこれでばっちり。

Webページ内のサイズを測る

MeasureIt

Webページ上のサイズをピクセルで簡単測定。アイコンをクリックして測定したい場所をドラッグするだけです。これもFF、Chromeでも使用。

ソースコードを色分けして表示

Better Source

Safariでソースコードを見ると、色分けもなく、行数も表示されていない、いわゆるプレーンテキストで表示されます。それをわかりやすく表示してくれる拡張機能。

ひととおりいじった後、最近使っていなかったFirefoxを試してみると…早い！かなり早い！Chromeが今だめだめなので実質私のMac上ではFirefoxが最速ブラウザーとなっています。でもやっぱりSafariの動きや見た目の美しさ、使い勝手の良さは圧倒的。うーん、Chromeのアップデートを心待ちにしつつ、Safari、FFを比較しながら使っていこうと思います。Chrome、Firefoxで使っている拡張機能は「Firefoxで使用していた＆Chromeで使用中の拡張機能 計36個」を読んでみてください！

データ入稿ガイド

今回紹介する印刷会社さんはすべてデータ入稿可能です。どの会社もデータ入稿専用のテンプレートが用意されているので、ダウンロードしてデザインします。用紙やオプション加工によってテンプレートが異なる場合があるので注意。データの種類や対応バージョンも事前によく読んでおきましょう。また、どの会社も用紙やオプション加工の無料サンプルを注文できるので、デザインし始める前に質感などの確認をしておくといいでしょう。

データ入稿時の注意点

• 文字やロゴは仕上がり線の3～4mm以内に配置
• 文字はアウトライン化する
• カラーはCMYKで指定
• 画像や写真は300～400dpiの解像度で埋め込む
• 20%以下の塗りは均一な塗りとはならないので注意
• 孤立点や空テキストは削除する

その他Webサイトに記載されている注意点をよく読んでデータ入稿してください。

印刷会社さんいろいろ

SuperPrint

SuperPrintではきらきらと輝くパールの入った用紙や糸くずの入った用紙など、様々な特殊用紙を扱っています。環境に優しい非木材紙ケナフを使った用紙もあります。クライアントから名刺デザインの依頼があった時は、最近はここをよく利用しています。データ対応バージョンはIllustrator 8〜CS4。

私はいつもこちらにお世話になっているので、注文時に紹介コード「82901998」を入力すると５％割引になります！

用紙・特殊加工

• 特殊用紙
• 非木材紙
• 透明
• スジ入れ
• 角丸（角度指定不可）
• 型押し（レタープレス）
• カラーエンボス
• 箔押し（金・銀・黒・ホログラム）
• ミシン目
• 変形
• 切り抜き

UV×Design｜大同印刷所

UV×Designは「UV×Designさんの名刺の特殊印刷をためしてみたよ」という記事で知りました。和風用紙、ざらざらとした質感のある用紙、キラキラ光沢のある用紙など、とにかく特殊用紙の種類が多い印刷会社さんです。通常時は透明で、ブラックライトをあてると発光するブラックライトインキを使うこともできます。データ対応バージョンはMac：Illustrator 5.5J～CS3・Photoshop 5.5J/CS3、Win：Illustrator 10.0J/CS3。

用紙・特殊加工

• 特殊用紙
• 透明・半透明
• ブラックライトインキ
• 角丸（3mm, 5mm, 7mm）
• スジ入れ

BUSINESS名刺印刷所

こちらBUSINESS名刺印刷所で扱える特殊加工の目玉は、なんといっても香りつき加工！約半年持続する香りを用紙にプラスすることができます。視覚だけでなく嗅覚でも楽しめる名刺が作れちゃいます。デザインテンプレート有り。データ対応バージョンはIllustrator 9。

用紙・特殊加工

• 香りつき
• 型押し（レタープレス）
• 箔押し（金・銀・赤・青）
• 変形
• 切り抜き

YMCard

私の名刺はこちらのYMCardさんで注文しました。透明以外にもシルバーやゴールドのプラスチック用紙があります。データ対応バージョンはIllustrator CS3以下。

用紙・特殊加工

• 特殊用紙
• 透明
• スジ入れ
• 角丸（角度指定可）
• 型押し（レタープレス）
• 箔押し（金・銀・黒・赤・青・緑）
• ミシン目

私、Manaの名刺です。

印刷屋さん にぶんのいち

印刷屋さん にぶんのいちには桐（木目）や手漉き和紙、透明なラメ入り用紙など、個性あふれる用紙があります！スタンダード名刺はデザインテンプレート有り。データ対応バージョンはIllustrator CS3以下、JPEG、PDF。

用紙・特殊加工

• 特殊用紙
• 透明
• 角丸

ecobe!(エコビー)

ecobe!(エコビー)はエコ活動をしている企業におすすめの印刷会社。ケナフをはじめ、バナナ、竹、桜などの素材を使った名刺が作れます。点字加工も可能。デザインテンプレート有り。データ対応バージョンはIllustrator 10以下。

用紙・特殊加工

• 特殊用紙
• 非木材紙
• 点字
• 角丸
• 変形（欧米サイズ：89x51mm）

タベルメ

タベルメではなんと、落花生に印刷することができます！ロゴを入れることもできるようです。賞味期限は約90日。

用紙・特殊加工

• 食べられる

特殊用紙や特殊加工を使った名刺いろいろ

用紙や加工をうまく利用してデザインされた名刺のまとめです。デザインを考え中の方の参考になれば幸いです！

• 50 Fresh Letterpress Business Cards – 型押加工された名刺デザイン50
• 30 Clever Business Cards Designs You Will Ever See – アイデア満載の名刺デザイン30
• Neat and Cool Collection of Black and White Business Cards – かっこいいモノクロの名刺いろいろ
• 50 Examples Of Cool Business Card Designs – クリエイティブな名刺デザイン50
• QRコードをうまく使った名刺デザイン40パターン

名刺デザインのアイデアは浮かびましたか？過去記事「国内Web業界で活躍する方の素敵な名刺デザインいろいろ」も参考にしてみてください。人とは違う名刺で相手に印象づけましょう！

WebデザイナーにおすすめのiPhoneアプリ 目次

1. Web制作関連
2. 配色関連
3. 画像加工関連
4. お仕事効率化

Web制作関連

1. FTP On The Go

FTP On The Go PROをダウンロード（850円）

どこにいてもFTPサーバーに接続できて、ファイルのダウンロード・アップロード・編集ができちゃう優れものアプリ。FTPのURL・ID・パスワードを入力するだけで接続完了です。新規ファイルやフォルダの作成、パーミッションの変更も可能。アップロードする前に「Web View」ボタンを押して表示確認もできます。外出先でサイトの誤字脱字を指摘された時にとっても便利 :D

2. Analytics App

Analytics Appをダウンロード（600円）

Google Analyticsでのアクセス解析をチェックできるアプリ。PV、ビジター数はもちろん、ユーザーが見ているブラウザー、参照元、検索キーワードなど、Google Analyticsのメイン機能をこのアプリから確認することができます。UIも非常に見やすく使いやすい！

3. Dashboard for Google Analytics

Dashboard for Google Analyticsをダウンロード（無料）

こちらも同じくGoogle Analyticsのアプリ。上記Analytics Appみたいに高性能じゃなくていいんだ！毎日PVとビジター数をチェックしたいだけなんだ！という人は、まずはこちらの無料アプリをお試しください。アドレスとパスワードを入力するだけでサクッと始められます。

4. Source Viewer

Source Viewer をダウンロード（85円）

Webサイトのソースコードを閲覧するためのアプリ。ソースはカラーハイライトされているので読みやすいです。HTMLのソースだけでなくJavaScriptやCSS、ページ内で使用されている画像も見ることができるのでとっても便利！

5. 大藤幹のHTML/XHTML/CSS辞典

大藤幹のHTML/XHTML/CSS辞典をダウンロード（700円）

HTMLとCSSの基本から、タグ・セレクタの使い方など、丁寧に解説してくれているアプリ。サンプルコードや表示サンプル、対応ブラウザーまで表示してくれる優れものです。サンプルコードは編集もできるので、Webサイト制作の勉強中の方には必須アプリです！

6. PG英単語

PG英単語をダウンロード（170円）

Web制作時によく使う英単語の辞書アプリ。英語を勉強中のWeb屋さんにおすすめです！発音記号や例文がついてるのがいいですね。私は逆に海外でWeb制作を習ったため、日本語でなんて言うのかわからない単語が多いので逆引きに使えます。。

7. WordPress

WordPressをダウンロードする（無料）

みんな大好きWordPressのiPhoneアプリ。記事を作成したり編集したり。簡単な修正ならこのアプリで充分です。

8. WhatTheFont

WhatTheFontをダウンロードする（無料）

画像からなんのフォントか識別してくれるアプリ。ブラウザ版もよく使っています。日本語には対応していませんが…。

WebデザイナーにおすすめのiPhoneアプリ 目次へ。

配色関連

9. HTML Colors

HTML Colorsをダウンロード（85円）

HTMLカラーコードを簡単に選択できるアプリ。カラーピッカー機能のついていないテキストエディタ等でコーディングしている人には便利かも。Webセーフカラー一覧表もあります。

10. ColorSchemer

ColorSchemerをダウンロード（250円）→無料

以前「カテゴリー別配色アイデア100」という記事でも軽く触れた、配色に関するアプリ。色をテーマにしたコミュニティサイト、COLOURloversと連携しているので、サイト内で保存しておいた配色を外出先でも簡単に見ることができます。特に外出先で撮影した写真から色を選択し、簡単に配色パターンを作成することもできるので、外出するのが楽しくなっちゃいますよ。

11. Color Stream

Color Streamをダウンロードする（250円）

こちらも配色パターンを作成できるアプリ。コミュニティ機能はありませんが、街角で見つけた素敵な配色をカメラで撮ってパレットを作成したり、作成したパレットをメールで送信できます。パレットを作り溜めしておけば必要なときにサッと使えますよ！（以前は無料だったのに気がついたら有料化されていた…）

WebデザイナーにおすすめのiPhoneアプリ 目次へ。

画像加工関連

12. WordFoto

WordFotoをダウンロード（170円）

タイポグラフィを使って写真をかっこよく加工できるアプリ。写真を選んで文字やフォントのスタイル等をカスタマイズするだけでインパクトのある作品が完成します！

13. ToonPAINT

ToonPAINTをダウンロード（170円）

写真をアメリカン・コミックのようなイラストに加工できるアプリです。ピンチで拡大・縮小、ドラッグで色を塗ったりすることができます。Webサイト上で使うイラスト素材を自分で撮影・加工して作っちゃいましょう！

14. JotNot Scanner

JotNot Scannerをダウンロードする（85円）

iPhoneで使えるスキャナーのアプリです。文字などはカメラよりクッキリと撮影できるので書類や名刺の保存時に便利かも。私は手描きのイラストをPhotoshopやIllustratorで加工する時に、このアプリを使って取り込んでいます。無料版もありますが、有料版だとEvernoteやDropboxに直接保存できたり、PDF保存もできるのでおすすめ。

15. PS Express

PS Expressをダウンロードする（無料）

PhotoshopのiPhoneアプリ。切り抜きや簡単な補正、加工ができます。iPhoneから写真をメール送信したりサイトにアップロードする前にサッと補正しておきましょう！

16. Adobe Ideas

Adobe Ideasをダウンロードする（500円）

お絵かき用のiPhoneアプリ。お絵かきというより外出時にふと思いついたデザインをサクっとメモしておくために使っています。撮影した写真を下のレイヤーに置いてトレースしたり、画像からカラーパレットを作ったりできます。

WebデザイナーにおすすめのiPhoneアプリ 目次へ。

お仕事効率化

17. Mobile Mouse Pro

Mobile Mouse Proをダウンロード（170円）

iPhoneを同じWi-fiネットワーク上で接続されているPC／Macのワイヤレストラックパッドやキーボードとして使えるようになります。アプリの起動や操作もらくちん！システム条件はMac OS X Leopard/Snow Leopard、Windows XP/Vista/7。PC／Mac用アプリをこちらからダウンロード後、iPhoneアプリを起動するとすぐに操作できるようになります。音楽を聞いたり映画を見る機会が多い人には特におすすめ。「iPhoneをMac/PCのワイヤレスマウス・タッチパッドにする『Mobile Mouse Pro』」という記事で更に詳しく紹介されています。うっかり屋さんな私はベッドに転がってからMacをシャットダウンしてないのに気づく事が多く、このアプリが役だってますｗ 無料版はワイヤレストラックパッドやキーボードのみ利用可能。

18. Zoho Invoice

Zoho Invoiceをダウンロード（無料）

愛用している請求書作成サービス、Zoho InvoiceのiPhoneアプリ。見積書・請求書の一覧や詳細確認、新規作成、支払い情報の追加など、基本的な操作はこのアプリで十分対応できます。

19. GoTasks

GoTasksをダウンロード（無料）

Google Tasksを連携しているToDoリスト管理のiPhoneアプリ。以前はGeeTasksLiteを使っていましたが、こちらのほうが見やすく使いやすかったので乗り換え。

20. Evernote

Evernoteをダウンロード（無料）

UIが新しくなって更に使いやすくなったEvernote。外出先で出会った素敵なデザインのポスターやCDジャケットなど、その場で撮影してクリップ！なんて事も簡単にできます。どこにいてもアンテナを貼ってアイデアの種を探し続けましょう！

21. Toggl

Togglをダウンロードする（無料）

タイムトラッキングのアプリ。プロジェクトやタスクにかかる時間をはかってくれます。ブラウザ版Togglをがっつり使っていたのでアプリもダウンロードしています。

WebデザイナーにおすすめのiPhoneアプリ 目次へ。

お気に入りのアプリは見つかりましたか？あ、iPhoneアプリではありませんが、iPhoneを無料でUSBメモリ化出来ちゃうMacアプリ「iPhone Explorer」もWeb屋さんにおすすめです！皆さんのおすすめアプリもぜひ教えてくださいね！

「おすすめアプリ20！」にしたかったのに、前回もそうですがなぜか中途半端な数字になってしまう…。