とあるweb屋の仕事術

とあるweb屋の仕事術

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

知識・経験

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

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

最近よく見かけるCookieの使用を宣言したり使用にクッキーの使用に同意するUIはGDPR対策の一環

海外のサイトでよく見られる Cookie使用に同意するUIや クッキーの使用を宣言して ユーザに案内を促すUI。 ここ最近では少しづつ、 日本のWebサイトでも 見かけるようになってきました。 CNET Japan CNET Japan のサイトではフッターでCookieの使用宣言と同…

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

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

食べログのPCサイトのSEO。h1タグの使いどころが工夫されている件

Webサイト製作の勉強には 大手サイトのソースや設計、 つくりをみるのが勉強になる! ということで、 今回は 食べログサイトの h1タグ の話。 食べログは古くからあるサイトなので、 PCサイトのデザインや設計は割と 古いところがあるかもしれませんが、 h1…

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

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

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

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

管理画面にWYSIWYG(ウィジウィグ)を採用してしんどかった話

WebサイトやWebシステム、 Webサービスには 管理画面と公開画面があります。 WordPressにもありますよね。 僕の勤めている会社では 受託でWeb製作しているのですが、 いわゆるCMSは、 独自開発したCMSを使っています。 クライアントごとにオーダーメイドに …

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

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

使いにくいUIでPVと広告収入が増える?記事を分割するUIが採用される理由

メディアサイトによく見られるUIですが、 一つの記事をページ分割、 ページネーションして 分けるサイトがあります。 ページネーションUI このページ分割することは、 UI/UXとしてはいいとは言えません。 ですが採用しているサイトは多いです。 とくにメデ…

2019年5月16日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月16日号です。 目立った動きはとくになし、 それではまとめ、どうぞ。 ics.media qiita.com note.mu weba11y.jp book.mynavi.jp careerhack.en-japan.com note.mu coliss.com w…

広告バナーには規格がある!2カラムのWebサイトのサイドカラムの幅は広告バナーサイズを基準にするといい

モバイルファーストな世の中ですが、 今日はPCサイト寄りの話。 モバイルファーストとはいえど、 モバイルサイトのデザインオンリーで 考えるクライアントはまだまだ少ないです。 モバイルファーストだけど PCサイトもしっかり構築する、 というかんじ。 ス…

販売戦略のとき意識したいマーケティングの4P。Product、Price、Promotion、Place、どこを攻めるのか考えよう。

マーケティングの4Pとは Product(製品・商品) Price(価格) Promotion(宣伝) Place(販売チャネル) です。 販売戦略に重要な考えで、 どのチャネルを攻略していくか という指標になります。 https://www.bizocean.jp/doc/howto/153/ 4P分析とは、どん…

全国展開のWebサイトにおける地域の分け方(エリア、都道府県の区分)

全国規模での コンテンツを取り扱う Webサイトでは必ず地域での セグメントがあります。 コンテンツの検索や、 ぐるなびや食べログ、 不動産のWebサイトのように 入口が地域で分かれていたりします。 ユーザ視点ではあまり意識することは ないかもしれません…

技術のトレンドをいつキャッチアップするか。アーリーアダプターが強い。

web製作業界の技術のトレンド。 フロントエンド界隈、バックエンド界隈ともに 日々、めまぐるしく状況が変化しています。 技術のトレンドを追うにも情報量も多く なかなか追いつかなかったりします。 どれがモダンでトレンドなのか、 自分はどれを取捨選択し…

2019年5月11日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月11日号です。 気になる動向・ニュース Facebook のアプリアイコン変わる Adobe CC、利用可能バージョンに制限 フェイスブックの仮想通貨プロジェクトに関する新たな情報 勉強…

2019年5月10日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月10日号です。 気になる動向・ニュース ヤフー、アフィリエイトサイトによる広告出稿を原則NGに それでは良記事のまとめ、どうぞー。 https://0-9.tumblr.com/post/18477079229…

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

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

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

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

2019年5月5日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 日曜日の2019年5月5日号です。 それでは学びの多い良記事まとめです。どうぞー。 www.negireon.com www.fnn.jp グーグル検索結果にファビコンが表示されるようになったのね!これはいい…

Bingのクローラーからの大量アクセスによりサイトがダウンしかけた話

日々、世界中のWebサイトの情報を収集する クローラー。 僕の勤めている会社では 大手のクライアントのwebサイトのサーバ保守も やっているのですが、数年前にこのクローラーが 大量にアクセスしてくることでサーバに負荷が かかり、サイトがダウンしかけた…

簡単なお問い合わせやアンケートに便利。webサイトのフォームにはGoogleフォームを活用しよう

当ブログにはそういえば お問い合わせページがなかったのですが、 先ほどGoogleフォームで作成しました。 www.google.com はてなブログでは お問い合わせフォームを作成する 機能がないようで、調べてみると Googleフォームを利用している方が 多かったので…

ペッパーくんに搭載されているタブレットで動作するwebシステム・業務ツールを開発したときの話

3年くらいまえの話です。 以前ペッパーくんに搭載されている タブレットで動作する webシステム・業務ツールを 開発したことがありました。 とくに学びになるような話でもないのですが、 まぁ思い出話的な。 ペッパーくんの胸にあるタブレットは、 なんてこ…

会員登録率アップの魔法のことば。「会員登録は30秒で完了します」は優れた会員登録へのアプローチ

webサイトやwebサービスで ユーザに疎まれる機能のひとつに会員登録機能があります。 本当にめんどくさい。 コンテンツを利用しようとしたときに出てくるログイン画面と会員登録への導線。 ユーザの皆さん、うざいと思ったことあると思います。 「面倒だから…

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

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

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

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

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

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

webデザイナーも知っておきたい、外部サービスのアカウントでログインするOAuth認証/OpenID認証について

うちの新人webデザイナーが知らない、 ということだったので今回はOAuth認証/OpenID認証ついて。 OAuth(オーオース)認証/OpenID認証とはざっくりいうと TwitterやFacebookなどの外部サービスのアカウントで ログインをする仕組みのことです。 詳しい仕組…

検索能力は問題解決能力。web製作の現場では調べる力、検索能力のスキルも重要。

組織やチームでweb製作するメリットのひとつ として、知識量と経験値があります。 課題や問題にぶち当たったときに、 自分ひとりの知識や経験だけでなく チーム内の全員の知識と経験がプラスされるので、 解決が早かったり、自分ひとりではたどり着けない ア…

修正が反映されない!?webサイトの修正、更新でハマりがちな「キャッシュ」

HTMLやJavaScript、CSSを確かに 修正・更新したはずなのに、 webサイトに内容が反映されない。 そんな現象にでくわしたらキャッシュを 疑いましょう。 キャッシュを知らない新人webデザイナーがハマっている ケースを何度か見てきました。 新人でなくても、w…

webサイトにメールアドレスを掲載するときの迷惑メール・スパム対策

webサイトにメールアドレスを 掲載するときに、そのまま メールアドレスをHTMLのソースに 記述してしまうと、スパム業者の標的に されます。 スパム業者は自動収集プログラムで webサイトのソースコードを解析し、 メールアドレスを収集します。 収集したメ…