とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

デザイナー心得

【錯覚資産】webデザイナーは初校が大事で最重要。成果物の第一印象がその後の制作フローすべてに影響することを意識しましょう

デザインの初校で信頼度が決まり、 信頼度が仕事の進めやすさに影響する というツイートを見ました。 デザイン提出の初校でつまづくと信頼度が低い所からのスタートになるのでやりづらい事が多い。逆に、すんなり通ると信頼してもらえやすいので仕事も進めや…

webサイトでは珍しいUIや奇をてらったデザインはNG。アフォーダンスをうまく取り入れよう

わかりやすいwebサイト、使いやすいwebサイトとは何かを考えさせてくれる 良ツイートを発見。 Webサイトで「珍しいデザイン」を用いるのはNGだ例えば下記のECは「+」「-」で数量を変更できるが、見慣れないため、何のボタンか分からない(数量との関連性が…

【Webデザイナー、ディレクターとしての経験を爆上げする方法】場数を踏む。自発的に何でもやる、勝手にやる、面倒なタスクを積極的に引き受ける

Webデザイナーやディレクターとしての 経験を上げたい。でも経験ばかりは、 ある程度の期間を必要とするのですぐに どうこうできるものでもないし、難しい。 そう考えているひとも多いと思います。 たしかに「経験」は他人から得られるものでも ないですし、…

固有名詞は辞書ツールで単語登録すべし。細かい所まで気を配る&入力間違いもナシで効率化、一石二鳥。

先日こんなツイートを見かけました。 そう言えば、文書やメッセージのやり取り時に固有名詞を適切に表現してる人は、仕事において細かい所まで気を配れる人という評価をするんだけど、この判断方法結構当たる例・macbook pro -> MacBook Pro・airpods -> Air…

一緒に仕事したいと思うWebエンジニア/デザイナーはゼロ回答をせずに代案を出す。

Web製作は、社内社外問わず なんといってもコミュニケーションの つらみが多いですよね。 Webエンジニアやデザイナーは クライアントやディレクター、 同じチームや組織のメンバーから 実現方法や仕様の相談を受けることが 多いとますが、こういうときにやっ…

デザイン案を印刷するときの用紙サイズは A3 がおすすめ!企画提案・プレゼンの印象を少しでもよくしよう

Web製作のフローで デザイン案をクライアントに 提案・プレゼンするフローは 必ずあります。 最近だとプロトタイプを作って 実際にブラウザ動かし画面上で 提案し、クライアントに見て もらうことも多いと思いますが、 プロトタイプと合わせて、紙で 印刷し…

成果物を他人にフィードバックしてもらうときは100%自分で納得したクオリティまで上げてから出そう

ベイジさんの社内日報 入社2年目で身につけたwebデザインの5つの習慣 | ベイジの日報 こちらにある内容が 3000回いいねしたい内容でした。 「自分の中で100点を取ってからフィードバックをもらう」 ある人が、後輩をレビューする際に「このデザインって自分…

デキるデザイナー、ディレクターの条件。相手の時間を奪わない、負担をかけない、考えさせない。

ディレクターやデザイナーが Web製作する上で、手を動かす 実務より大切なことがあります。 それは 相手の時間を奪わない、 相手に負担をかけない、 相手に考えさせないやりとりを 心がけること、です。 気が利くかどうかがデキるWeb屋の条件です。 先日見か…

LP(ランディングページ)制作費用40万は高いのか?相場はいくらか?Web製作の現場のリアルな話。

LP(ランディングページ)の 制作費用に関してこんなツイートが。 LP制作費が40万〜と答えると「たかっ!」っていう人多いです。確かに1ページとして考えるとめちゃくちゃ高いかもしれませんが、目標を達成するための必要な情報を凝縮させる1ページを作るの…

スマホサイトに記載されている電話番号は「<a href="tel:電話番号">」で電話発信用リンクにするべきか

スマホサイトにある 電話番号はリンクにすべきか問題。 店舗を取り扱っているWebサイト であればお店の電話番号が掲載されているし、 会社サイトであれば 会社概要に電話番号が掲載されています。 ECサイト、ネットショップであれば、 特定商取引法に基づく…

デザイン/UI設計・情報整理の基本。デザインを構成する要素を差別化して視覚的階層を意識して作ろう

デザインは整形して見た目をきれいにすることではなく、本質は問題解決、情報設計、情報整理です。 今回は「情報整理」にフォーカスをあてた記事を紹介します。 Webサイトの実装にあたってのデザイン作業を細分化すると「UI設計」というフェーズがあります。…

会員登録フォームの性別欄は男性・女性だけはもう古い。多様性を尊重する形式を考慮しよう

会員登録フォームでは だいたいある項目。 性別の選択。 よく見るのは下記の2種類です。 ○男性 ○女性 ですが、昨今ジェンダーへの関心が 高まっていることもあって、上記の 2種以外の選択肢や入力を促すサイト も増えてきました。 about.mercari.com 「メル…

クオリティの高いWebサイトは文節までこだわる!Webサイトのテキストの読みやすさを実現する文字組み実装の例

文節、こだわってますか? レスポンシブサイト/スマホサイトでは 文章の折返し位置がデバイスによって 変わりますよね。 そんなの細かく いちいち調整してらんないよ、と思ってしまいますが、 クオリティの高いWebサイトではちゃんとやっている。 そんなツ…

Webサイトの修正依頼・フィードバックをどこまでやるかの線引きと仕切り

Webサイト製作の過程で、 クライアントの確認のフェーズが かならずありますが、そのあとには だいたい修正要望・修正依頼があります。 フィードバックというやつですね。 この修正依頼というやつは なかなか注意が必要です。 言われるがままにやりだすと エ…

仕事をスムーズにこなすための4つの思考【良ツイート紹介】

仕事がうまく回らないときや 回ってない状況を一歩引いてみると、 何かやり方が間違っていて、 遠回りしているということが 多いですよね。 無駄なことをしていたり、 話をややこしくしていたり、 むずかしく考えすぎていたり、 根本から間違っていたり、 方…

【良記事ピックアップ】タブUIの考察・最適解

デザイナーなら読んでおきたい 良記事ピックアップシリーズ。 Web屋の現場では、日々の情報収集が スキルに直結していく場面も多い。 普段からいかにアンテナを張って、 引き出しを増やしておくかが スキルアップへの近道であーる! というわけで、さっそく…

漫画から学べる。ドラゴンボールビジネス論が勉強&参考になりすぎておもしろい!

面白くて勉強になるツイートを 見かけたのでご紹介。 漫画ドラゴンボールの キャラクターやストーリーが ビジネス視点で解説されています。 ドラゴンボールビジネス論①「なぜ、同じ人間なのにヤムチャは凋落し、クリリンは世界一強い地球人になれたのか?」…

1画面内に自動で動く要素を2箇所以上いれないようにデザイン設計をしよう

リッチなUIが多くなってきた昨今の Webサイト。 ブラウザでの表現も豊かになり、 情報の見せ方が多様になってきています。 見栄えがいいからと言って、 なんでもかんでもリッチにすれば いいというわけではないので 基本、1画面内に動く要素が2つ以上ある …

Web製作の品質とお金と早さの話

めちゃくちゃ共感、 共感の嵐のこんなツイートがあったので ご紹介。 めっちゃこれいいわ。発注者にわかって欲しい事実。 pic.twitter.com/B4VQZRA0cx — ふぁるこん 7/28-8/2 SIGGRAPH (@makotofalcon) June 19, 2019 品質/価格(安さ)/早さの相関を うま…

普段の何気ない会話から周囲の人間との情報レベルを合わせておくとディレクションやWeb製作フローがスムーズになりますよ

上司や同僚がどんなことを 考えているのかだったり、 いま気にしているWebのトレンドや 技術は何なのか、 よくみるWebサイト、 よく使うWebサービスは何か。 どんな技術書、 参考書・教本を読んでいるかなど、 よく仕事をするひとが 普段どういった情報に 触…

デザイナーがUI設計/デザインする上で持っておきたい大切な3つの視点・意識

デザインをする上では、 重要な3つの視点があります。 ユーザ視点 クライアント視点 開発者視点 この3つはデザイナーに必要な視点であり 常にもっておきたい「意識」です。 デザインを設計する上で一番大切なのは、 やはり「ユーザ視点」です。 ユーザにと…

結論から言う、具体的に言う、箇条書きにする。要点をまとめて相手に物事をわかりやすく伝える方法。

Web製作で一番むずかしいのは コミュニケーションです。 デザイン設計やシステム設計、 プログラミングなど実装レベルの業務も もちろん難しいですが、プロジェクトを うまく進行するには、 コミュニケーションスキルが必須で、 いちばんむずかしく、悩まし…

メインビジュアルにスライドショー、カルーセルUIを採用しても意味ない問題

トップページの最上部、 ファーストビューによくある カルーセルUI、スライドショーのあれ。 メインビジュアルとか キービジュアルとか ヒーローヘッダとか いろいろ呼び名はありますが、 とにかくスライドして大きな イメージが流れるあれ。 すっかり定番の…

文字詰めを制するものはデザインを制す。カーニングでクオリティアップ!カーニングの参考になる良記事まとめ

カーニングを極めたいあなたに送る良記事 まとめです。 カーニング - Wikipedia カーニング(英語: kerning)とは、主に欧文の組版において、プロポーショナルフォントの文字同士の間隔(アキ)を調整する技法のこと。 カーニングを行わない場合は、文字の間…

「たのしごとデザイン論」が Kindle Unlimited に登場。デザイナーなら必ず読んでおきたい一冊。

たのしごとデザイン論〈クリエイターが幸福に仕事をするための50の方法論。〉がなんと Kindle Unlimited に登場。 実は「たのしごとデザイン論」が今、Kindle Unlimitedの書架に並んでるんです!つまり、amazon prime登録の人は無料、タダで全ページ読み放題…

ファイル名をキーワードで区切る場合に使用するのはハイフンではなくアンダーバーがいい理由

webサイトの実装で取り扱うファイルは 多岐に渡りますが、主なものとしては HTML、CSS、画像(jpg/png/svg/gif)、JavaScript、PHPあたりでしょうか。 資料作成など含めるとPDFやWord、Excel、PowerPointあたりもよく使われるファイルだと思います。 これら…

「それをやる意味...」目的を意識せよ。webサイト、webサービスの改善は見た目から考えるとうまくいかない

経験の少ない営業、ディレクター、 web製作者はなんでもすぐ「見た目」の話をしがち、 というおはなし。 webサイトやwebサービスのリニューアルや、 新規機能の導入といった企画・提案において、 見た目、つまりビジュアルの話をしがち。 本質の目的を無視し…

webサイトの画像の形式。png、jpg、svg...使い分けはどうするのが正解か

webサイトの画像はさまざまな形式で 掲載されています。 一般的なものとしては、PNG、JPEG、GIF、SVG。 そのほか最近では APNG、WebPという画像形式までてきました。 それぞれの使い分け、おさらいしましょう。 詳細は本記事の最下部に掲載した参考サイトを …

当事者意識が大事。他人まかせにしているプロジェクトやタスクは失敗する。

Webサイト製作の案件でのプロジェクトの進行にあたっては、 自分ひとりしかいないと思え。 自分が要件を取りこぼしたら、誰も拾ってくれないと思え。 これは僕が新人時代、上司に言われた言葉。 企画書作成、要件定義、打ち合わせや、デザイン作業、コーディ…

クライアントからもらう資料のテキストをそのままコピペするとスペースやゴミデータがはいることあるので注意

クライアントから資料をもらって、 webサイトにテキストを掲載するとき。 クライアントは、パワポやWordファイル、 エクセル、CSV、PDF...などなどいろいろな ファイル形式で送ってきますよね。 実装あるあるなんですが、 それらのファイルからテキストをコ…