ウェブディレクター

商社の営業がWebディレクターになって、もう10年ぐらいになる。 まだまだ自分も半人前だと思うが、そろそろ謙虚も嫌味に聞こえてくる頃合いの年齢で、後輩たちにも良い格好はしたいものである。 今日はそんな私が、日頃ディレクターとして気をつけている点をお話ししようと思う。これからディレクターとして活動する人たちの、心構えのひとつにでもなってくれたら嬉しい。 体調管理・健康管理 一番最初にこの項目を持ってきたけど、これが本当に大事！なのにないがしろにされがちなので、ぜひみんなも気をつけよう。 ディレクターが動けな ...

Webサイトの制作をしているなかで、XDでデザインを制作することは、最近ではスタンダードになってきた。私の身の回りでは、Photoshopでの制作よりもXDのほうが多いぐらいだ。 さて、そのなかでよく起こるトラブルの一つとして、デザインとHTMLのギャップが挙げられる。 具体的には、クライアントから「デザインで見たときは良い感じだったのに、コーディングしたページを見てみたら、なんだが画像とかテキストが大きくて見づらく感じる」というものだ。 いろいろな理由はあるが、おそらくは XD で作ったデザインを「プレ ...

クライアント Webサイトのほうで表示崩れが発生してまして、修正をお願いできますでしょうか！ bamka 承知しました。閲覧環境を教えていただけますでしょうか。 Chromeの最新です。 bamka OSは何を使っていますか？ Windowsです。 ……といった具合に、クライアントが閲覧している環境を確認するのも一苦労。何度もキャッチボールが発生してしまっては、クライアントも嫌な気持ちになってしまう。 そんなときは、このサイトで一発解決。クライアントに「このサイトにアクセスして、スクリーンショットを送って ...

ウェブサイト「Can't Unsee」では、ウェブサイトやアプリのUIについて、自分のレベルを測ることができる。 Can't Unsee A game where you need to pick the design that is most correct. Test your attention to details! UIパーツのデザインが次々に表示されるので、二択の中から正しいものを選んでいくのだ。 最初は非常にイージーで、パッと見ただけで「こっちが正解」とわかる。しかし問題が進むにつれて難易度 ...

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スライド ...