Clik here to view.
Webディレクターが仕事で使っているWebサービス＆アプリまとめ
私はWebディレクターとして日々業務をこなしているわけだが、その中で特に使用頻度の高いITツールをまとめてみた。 プロジェクト管理・オンラインストレージ・コミュニケーションなど、種類別にカテゴライズしてある。現役でWebディレクターをしている方々の参考になれたらうれしい。 オンラインストレージ Dropbox Dropbox Dropbox is a modern workspace...
View ArticleClik here to view.
デザインヒアリングシートでクライアントのイメージを形にしよう
ウェブディレクターを何年やってきても、コケるときは大きくコケてしまうのが、デザインだ。 依頼した内容とできあがったデザインが違う。あるいは、クライアントが希望していたデザインと認識の齟齬がある。そういう失敗は何度も経験してきた。 絶対に失敗しない方法を私は知らない。が、お互いの意識をすり合わせて、失敗の確率を下げるための方法のいくつかは知っている。...
View ArticleClik here to view.
WebディレクターのMacに入れておくべきアプリ15選
ウェブディレクターな、あなたへ。仕事をするうえで、仕事をスムーズに進めるために、作業を効率的に進めるために、役立つアプリをまとめてみた。 もちろん、あなたがウェブディレクターでなかったとしても、いくつかのアプリは必ず役立つものとなっているはず。お付き合いのほど、どうぞよろしく。 BetterTouchTool リンク：BetterTouchTool公式ダウンロードリンク...
View ArticleClik here to view.
タスクの抱え落ちがなくなる！ボールを即座に打ち返すコツとは
やらなければいけない仕事があるのに、「どうやって処理をしようか…」「なにから手を付けたらいいのか」と、考えなくちゃいけない事がいろいろと多くて、結局あとまわしにしてしまう。 そういう経験はだれでもあると思います。 タスクの実行の前に “考える” って作業が発生すると、途端に腰が重くなってしまいますよね。「何をするべきか」「どうやってやるべきか」を考えて計画するのは、想像以上に大変なもの。...
View ArticleClik here to view.
簡単！アプリ不要！画像をSVG変換するウェブツール「vectorizer」の使い方
ウェブサイトの制作にあたっては、SVG形式の画像ファイルが必要になるケースも増えてきた。しかしぼくはPhotoshopやIllustratorを持っていないため、アプリを使って自作することができない。 そこで活用しているのが、PNGやJPEG形式の画像をSVG形式に変換してくれるウェブサービス「vectorizer」だ。 Online Image Vectorizer Online raster...
View ArticleClik here to view.
【iPhone】アプリ不要！もっとも簡単にウェブページ全体のキャプチャを撮る方法
ウェブページ全体のキャプチャを撮りたい。そんなときに便利なアプリ「Awesome Screenshot」を以前ご紹介した。 関連記事：ウェブディレクター必須！iPhoneでサイト全体のキャプチャを撮るなら「Awesome Screenshot」がオススメ – あなたのスイッチを押すブログ...
View ArticleClik here to view.
サイト内のアナリティクスやタグマネの動作チェックする最も簡単な方法
ブログをやりつつ、ウェブディレクターとしても活動している私です。 ウェブの制作をしていて意外と見落としがちなのが、Google アナリティクスのコードの挿入漏れや、Google タグマネージャの設置漏れ。 ちゃんと確認するのがディレクターとしての務めですが、ソースコードを一々覗いていたら面倒です。 そこで便利なのが Google Chrome の拡張機能「Google Tag...
View ArticleClik here to view.
Excelで作った表をウェブで使えるHTMLに書き出す方法
Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。 Excelを使って作った表のデザインをそのままWebで展開できたら、そんなに楽なことはありません。今日はそんな便利な小技をご紹介。 ちなみにNumbersを使った方法もご紹介していますので、こちらも合わせてご参考にどうぞ。 Numbersで作った表をウェブで使えるHTMLに書き出す方法 |...
View ArticleClik here to view.
Numbersで作った表をウェブで使えるHTMLに書き出す方法
Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。 Mac用のExcelソフト「Numbers」。これを使って作った表のデザインをそのままWebで展開できたら、そんなに楽なことはありません。今日はそんな便利な小技をご紹介。 ちなみにExcelを使った方法もご紹介していますので、合わせて参考にしてみてください。...
View ArticleClik here to view.
ウェブサイトがアプリ化！PWAの特徴と対応サイト事例
ウェブサイトをネイティブアプリのような感覚で使える技術が注目を集めています。「PWA（プログレッシブウェブアプリ）」と呼ぶんですけど、使ったことありますか？ このPWAに対応したサイトでは、ページを表示する速度が劇的に早かったり、アプリのようなヌルヌルっとした使い心地で利用できたりと、ユーザーにとってメリットが多いのです。...
View ArticleClik here to view.
ウェブサイトのMETAデータを一括で取得できる超便利なChrome拡張機能
自分が制作しているウェブサイトのMETA情報（title・description・keyword）が、指定した通りちゃんと反映されているのか。これを確認するのもウェブディレクターの務めです。 しかし一ページ一ページ確認しているのは非常に面倒くさい。できれば一気に取得して、照らし合わせをしたい。 そんなときに便利なのが、Google Chromeの拡張機能「meta getty」です。...
View ArticleClik here to view.
詳細なMETAやSNSタグを一括で簡単に確認できるChrome拡張機能
ボクはウェブディレクターとして、ウェブページの制作の管理進行を仕事としています。 ページに設定されているMETAの抜け漏れをチェックしたり、画像のaltの確認なども、ディレクターであるボクの仕事なのですが、これが意外と面倒だったりします。 でもやらなくちゃいけないわけで。 そういうときにボクが使っているのが、Chromeの拡張機能「SEO META in 1...
View ArticleClik here to view.
プロのライターや編プロでも失敗する、文章作りで忘れちゃいけない基礎中の基礎
ウェブディレクターとして活動していると、編プロさんに記事の作成を依頼することがあります。普段自分で文章を書いているので、人に依頼するのはなんだか不思議な感覚です。 しかし依頼した原稿が、必ずしも望んだクオリティで返ってくるわけではありません。中にはとても——申し訳ないけれどクライアントに提出できないレベルのクオリティである場合があります。...
View ArticleClik here to view.
強いキャッシュも一発クリア！スーパーリロードでWebページを最新にする方法
Webページを更新しても、キャッシュの影響で最新の状態を確認できない場合があります。 キャッシュとは…？ パソコンはインターネット上でホームページを表示させた際にそのデータを一時的に保存（キャッシュ）しておきます。そして再度同じページへアクセスしたときにサーバーのデータを取りにいかずに、自分のパソコン上にあるデータを取りに行くことがあります。 via:...
View ArticleClik here to view.
ウェブページ内の直線位置や長さを測るのに超便利なChrome拡張機能「Page Ruler」
今日は主にウェブ担当者向けの内容を。 ウェブページのデザインやコーディングをチェックをしていると、こんなことを考えたりします。 「AとBの要素、ちょっとずれてる気がするんだけど、本当に直線位置にあるかな」とか、「このサイトのメインコンテンツ部分の横幅って何pxだろう？」とか。 サイト内・ページ内の要素の配置や長さを、目視だけで確認するには限界がありますよね。 そんなとき、Google Chrome...
View ArticleClik here to view.
ページ内の全角英数を半角にするChrome拡張機能でネットサーフィンが快適に
ウェブページを見ていて、全角の数字と半角の数字が入り乱れているサイトを、たまに目にします。ブログの記事やニュースリリースもそうです。 世の中には全角と半角の違いなんて気にもとめないウェブ担当者が結構いるってことでしょうかね。 でも私は気になってしまう。というか、読んでいてとても気持ちが悪い。どちらかに統一して欲しいし、そういった記号や英数字は極力半角で表現するべきだと思うのです。 さよなら全角英数...
View ArticleClik here to view.
ウェブ担当者が必ず助けられる便利ツールは「ルフトツールズ」にまとまっている
ブロガーでありつつWebの制作会社でディレクターをやっている私です。 ウェブディレクターとして業務をする上で、とても重宝しているウェブサイトがありますので、今日はそのサイトのご紹介。ウェブ担当者なら絶対に役立つ便利ツールが６つほどまとめられています。 そのサイトが「ルフトツールズ（LUFTTOOLS）」。 ルフトツールズ（LUFTTOOLS） web・ウェブ制作に役立つ便利ツール集...
View ArticleClik here to view.
画像を手軽に共有するならGyazo！URLシェアとテキスト挿入が手間いらず
ウェブ制作会社のディレクターとして、「このページのココをちょろっと修正しておいてください！」みたいな簡単な指示をお願いすることが多々あります。 あまりに軽微なものなのでテキストだけで指示を出すこともありますが、それゆえに認識違いが起こりえるのも事実。言葉だけでは勘違いも起きやすい。 かといって丁寧な指示書を作成していては時間がいくらあっても足りません。...
View ArticleClik here to view.
Google Chromeからガラケーのブラウザチェック！ユーザーエージェントの追加変更方法
ガラケー。またの名をフィーチャーフォン。いわゆるパカパッカケータイ。今の若い世代においては、その存在を知らない子どももいるのではないでしょうか。 しかし、私のような制作会社にてウェブサイトの制作をしていますと、未だに「ガラケーでの見た目も確認して欲しい」という要望をいただきます。件数はわずかですし、本当にたまーになのですが。 そんなとき、Google...
View ArticleClik here to view.
100個のURLを一気に全部開く方法！Chrome拡張機能「Pasty」なら一瞬で
複数のウェブページを一気に開きたい。URLをひとつひとつクリックするのには、もうウンザリだ！ そんな人にオススメのChrome拡張機能が、今日ご紹介する「Pasty」。 コピーしたテキストにURLが含まれている場合、リンク先であるウェブページをコピーした数だけ開いてくれる便利な拡張機能なのです。 複数のURLを一気に開ける「Pasty」 「Pasty」は Google Chrome...
View Article
