ウェブディレクター

Webサイトのパフォーマンス改善をしたい！1秒でも早くページが表示されるように、いろんな施策を実施したい！ けれども、すでに公開・運用しているサイトにテコ入れをするのが難しく、具体的なアクションにまでなかなか落とし込めない。そんな悩みもあるかと思います。 実際「パフォーマンス改善」というと、ページの構造そのものに手を入れることも少なくありません。一朝一夕でできるものではなく、それなりに工数と費用が必要になります。 しかしそんな中でも、比較的手軽で、しかも絶大な効果が期待できる改善策があります。 それが「画 ...

私が仕事でWeb制作をするさい、プロジェクトメンバーで共有するタスク管理ツールは、主にBacklogを活用しています。 日々使っているからこそ、「こういう使い方は良くないな」「こんな失敗、あるあるだな」という事例が見えてきます。 今日はそんな中でも、絶対にやってはいけないことをピックアップしました。自分の使い方と照らし合わせてみて、「できてないな」と思うところがあれば改善しましょう！

仕事にもいくつか種類があるけれど、大まかに「手を動かす作業」と「頭を動かす作業」にわけられると思う。 このふたつを同時に進行すると、だいたいろくなことにならない。やるなら、どちらか一方だ。 「手を動かす」と決めたのなら、考えてはいけない。考える余地もなく、ただ手を動かすことに集中。手を動かしながらの考えごとは "雑念" である。どちらにも集中できていない状態だ。 逆もそうだ。 「頭を動かす」と決めたのなら、作業をしちゃあダメだ。アイデアはOK。メモを取ったり、ラフを作ったり、思考を発散したり、整理する行為 ...

Webディレクターであり、ブログを中心としたライター活動をしている筆者が、2020年に買ってよかったものをまとめてみた。全部で13個になる。 2020年は新型コロナウイルスの関係で、仕事環境の変化や、仕事のやりかた自体の変化を求められた人も多いかと思う。私も、ほとんど出社せずに、自宅での仕事が "当たり前" になった。 そうなると、2020年に買ったものも、自ずと「住環境・仕事環境を整えるためのもの」が中心となっている。ぜ すべてが参考にならずとも、ご自身の生活に取り込めそうなものを "つまみ食い" する ...

私はWebディレクターとして日々業務をこなしているわけだが、その中で特に使用頻度の高いITツールをまとめてみた。 プロジェクト管理・オンラインストレージ・コミュニケーションなど、種類別にカテゴライズしてある。現役でWebディレクターをしている方々の参考になれたらうれしい。

ウェブディレクターを何年やってきても、コケるときは大きくコケてしまうのが、デザインだ。 依頼した内容とできあがったデザインが違う。あるいは、クライアントが希望していたデザインと認識の齟齬がある。そういう失敗は何度も経験してきた。 絶対に失敗しない方法を私は知らない。が、お互いの意識をすり合わせて、失敗の確率を下げるための方法のいくつかは知っている。 そのひとつが、今回ご紹介する「デザインヒアリングシート」だ。お付き合いのほど、どうぞよろしく。 デザインヒアリングシート：テンプレート 今回私が作ったデザイン ...

ウェブディレクターな、あなたへ。仕事をするうえで、仕事をスムーズに進めるために、作業を効率的に進めるために、役立つアプリをまとめてみた。 もちろん、あなたがウェブディレクターでなかったとしても、いくつかのアプリは必ず役立つものとなっているはず。お付き合いのほど、どうぞよろしく。

XDでもフォントをアウトライン化することはできる。 アウトライン化したい文字を選択した状態でcommand8を押すだけだ。 どうしよう、この記事で言いたいことが終わってしまった。あとは「アウトラインとはなんぞや」という話がつづくだけなので、時間がある人だけお付き合いいただければと思う。

ウェブディレクターとして活動していると、しばしば数十ページにもおよぶウェブページのMETA情報を確認しなければならない。これが結構な手間なのだ。 そんな手間をなくして、極力楽をしようというのが今回の趣旨。 Googleスプレッドシートに、「IMPORTXML」という関数を入力すると、ウェブサイトのあらゆる情報を引っ張ってきてくれる。 title、description、h1、keyword、og title、twitter card など、取得できる情報は多岐にわたる。 私が作ったテンプレートを使用すれば ...

やらなければいけない仕事があるのに、「どうやって処理をしようか…」「なにから手を付けたらいいのか」と、考えなくちゃいけない事がいろいろと多くて、結局あとまわしにしてしまう。 そういう経験はだれでもあると思います。 タスクの実行の前に "考える" って作業が発生すると、途端に腰が重くなってしまいますよね。「何をするべきか」「どうやってやるべきか」を考えて計画するのは、想像以上に大変なもの。 そうやって、悩んで、迷って、二の足を踏んでしまい、結局だれに仕事を振るでもなく、かといって自分で終わらせるわけでもなく ...

ウェブサイトの制作にあたっては、SVG形式の画像ファイルが必要になるケースも増えてきた。しかしぼくはPhotoshopやIllustratorを持っていないため、アプリを使って自作することができない。 そこで活用しているのが、PNGやJPEG形式の画像をSVG形式に変換してくれるウェブサービス「vectorizer」だ。 Online Image Vectorizer Online raster to vector converter. Convert your images (jpeg, jpg or ...

ウェブページ全体のキャプチャを撮りたい。そんなときに便利なアプリ「Awesome Screenshot」を以前ご紹介した。 関連記事：ウェブディレクター必須！iPhoneでサイト全体のキャプチャを撮るなら「Awesome Screenshot」がオススメ – あなたのスイッチを押すブログ しかしそんなアプリがなくとも、iPhoneのデフォルトの機能で、1ページを丸ごとパパっとキャプチャに撮る方法があることを知ったので、シェアしようと思う。 ぼくのようにウェブに関わる仕事をしている人にとっては、とても便利な ...

ブログをやりつつ、ウェブディレクターとしても活動している私です。 ウェブの制作をしていて意外と見落としがちなのが、Google アナリティクスのコードの挿入漏れや、Google タグマネージャの設置漏れ。 ちゃんと確認するのがディレクターとしての務めですが、ソースコードを一々覗いていたら面倒です。 そこで便利なのが Google Chrome の拡張機能「Google Tag Assistant」。これを使えば、そのページにちゃんと実装されているか、一目瞭然で判別できます。

Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。 Excelを使って作った表のデザインをそのままWebで展開できたら、そんなに楽なことはありません。今日はそんな便利な小技をご紹介。 ちなみにNumbersを使った方法もご紹介していますので、こちらも合わせてご参考にどうぞ。 Numbersで作った表をウェブで使えるHTMLに書き出す方法 | あなたのスイッチを押すブログ Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。 Ma ...

Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。 Mac用のExcelソフト「Numbers」。これを使って作った表のデザインをそのままWebで展開できたら、そんなに楽なことはありません。今日はそんな便利な小技をご紹介。 ちなみにExcelを使った方法もご紹介していますので、合わせて参考にしてみてください。 Excelで作った表をウェブで使えるHTMLに書き出す方法 | あなたのスイッチを押すブログ Webページで表のデザインを組むのは意外と面倒。そんなときに便利 ...

チームのメンバーでブレストをして、ホワイトボードに付箋をペタペタしながら図式化する。アイデアを出し合うときにはメジャーな手法かと思います。 しかしメンバー全員が同じ場所にいなければならず、昨今の働き方ではそれも結構難しい。 そこで便利なのが、ホワイトボードをウェブ上に擬似的に設置して、それをリアルタイムで共同編集する手法です。 「RealtimeBoard」のような専用のウェブサービスもありますが、有料アカウントでなければ機能が限られるのが難点なのです。 なので私がおすすめしたいのが、Googleスライド ...

ウェブサイトをネイティブアプリのような感覚で使える技術が注目を集めています。「PWA（プログレッシブウェブアプリ）」と呼ぶんですけど、使ったことありますか？ このPWAに対応したサイトでは、ページを表示する速度が劇的に早かったり、アプリのようなヌルヌルっとした使い心地で利用できたりと、ユーザーにとってメリットが多いのです。 PWAとネイティブアプリの動作比較ムービーです。左がPWAで、右がネイティブアプリ。PWAの方は、インストールに掛かる時間も少なく、実際の使用感もネイティブアプリと遜色ないことがわかり ...

自分が制作しているウェブサイトのMETA情報（title・description・keyword）が、指定した通りちゃんと反映されているのか。これを確認するのもウェブディレクターの務めです。 しかし一ページ一ページ確認しているのは非常に面倒くさい。できれば一気に取得して、照らし合わせをしたい。 そんなときに便利なのが、Google Chromeの拡張機能「meta getty」です。

ボクはウェブディレクターとして、ウェブページの制作の管理進行を仕事としています。 ページに設定されているMETAの抜け漏れをチェックしたり、画像のaltの確認なども、ディレクターであるボクの仕事なのですが、これが意外と面倒だったりします。 でもやらなくちゃいけないわけで。 そういうときにボクが使っているのが、Chromeの拡張機能「SEO META in 1 CLICK」です。その理由は単純明快で「得られる情報が多くて、かつ見やすいから」です。

Webページを更新しても、キャッシュの影響で最新の状態を確認できない場合があります。 キャッシュとは…？ パソコンはインターネット上でホームページを表示させた際にそのデータを一時的に保存（キャッシュ）しておきます。そして再度同じページへアクセスしたときにサーバーのデータを取りにいかずに、自分のパソコン上にあるデータを取りに行くことがあります。 via: ブラウザのキャッシュ削除方法～ホームページが更新されていない!?～ ブログの更新やウェブサイトの改修を実施して、その結果を確認しようとしてもキャッシュが邪 ...