とあるweb屋の仕事術

とあるweb屋の仕事術

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

デザイナー心得

スマホサイトに記載されている電話番号は「<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製作で一番むずかしいのは コミュニケーションです。 デザイン設計やシステム設計、 プログラミングなど実装レベルの業務も もちろん難しいですが、プロジェクトを うまく進行するには、 コミュニケーションスキルが必須で、 いちばんむずかしく、悩まし…

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

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月19日号です。 note.mu jp.techcrunch.com note.mu hbol.jp www.itmedia.co.jp speakerdeck.com goworkship.com coliss.com speakerdeck.com ------- 以上です。 こんなかんじ…

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

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月18日号です。 気になるニュース・動向 楽天がライブ動画に参入「Rakuten LIVE」 誰でも配信OK、コマース機能も - ITmedia NEWS 意匠法改正が変えるWebサイトリリース・リニュ…

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

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月17日号です。 気になる動向・ニュース 【速報】新しく出てきた「Google Travel」がヤバい件。旅行代理店が消える未来? ついにLINEにも「ストーリー」機能実装!タイムライン…

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…

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

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

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…

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

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月9日号です。 気になる動向・ニュース Instagram、アカウント停止に関するガイドラインを改定へ LINEアプリ「画像内の文字起こし」機能を追加!画像内のテキスト翻訳も対応 勉…

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

カーニングを極めたいあなたに送る良記事 まとめです。 カーニング - 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 グーグル検索結果にファビコンが表示されるようになったのね!これはいい…

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

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 木曜日の2019年5月2日号です。 気になる動向・ニュース Google、ロケーションや検索履歴データの自動削除機能 3カ月か18カ月から選択可能に facebook 新サービス発表 f8まとめ (及川さ…

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

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...などなどいろいろな ファイル形式で送ってきますよね。 実装あるあるなんですが、 それらのファイルからテキストをコ…