とあるweb屋の仕事術

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

Tips

かっこいいデザイン、UIの管理画面の実装には映画のHUD、スクリーン・グラフィックを参考にしよう

Webサイトの運用には欠かせない管理画面。 管理画面は更新頻度の高いWebサイトでは 毎日さわるものです。 毎日さわるものなので、気分良く使いたいですよね。 かっこいい管理画面を使いたい。 かっこいい管理画面の実装に参考にしたいのが、 映画のHUD、スク…

今、話題になっている各地域のTwitter(ツイッター)のトレンドがまる分かり!Twittrend(ついっトレンド)

リアルタイムでなうでヤングな 情報鮮度がまるっとひと目でわかるWebサービスを ご紹介。Twittrend(ついっトレンド)です。 Twitterで話題になっている、 トレンドワードを日本国内の各都道府県から 海外の主要国まで網羅しており、トレンドが ひと目でわか…

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

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

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

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

スマホサイトのパンくず問題。長くなった場合、どう処理するのが適切か

スマホサイトに パンくずつけてますか? パンくずリスト - Wikipedia パンくずリスト(breadcrumb list)は、ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも…

Googleの検索結果がますます充実。リッチリザルトでWebサイトにアクセスせずに情報がゲットできるように

先日Googleが、 新しいリッチリザルトを 正式公開しました。 www.suzukikenichi.com これは何かと言うと 上記の記事の中でも 動画で紹介されていますが、 検索結果に「よくある質問」や 「How to系(方法や手順)」の コンテンツを展開する 新しい検索結果の…

有益で鮮度が高い情報が満載の CSS Nite はベスト・セッションで過去のセミナーの音声やスライド資料が見れる。最&高。

CSS Niteは Web製作に関するセミナーです。 Web製作に関わっている人間であれば 知らないひとはいないんじゃないでしょうか。 (ちなみにアイキャッチの画像はCSS Niteの様子ではありませんあしからず...) 有益なセミナーが全国各地で行われています。 cssn…

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

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

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

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

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

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

ヒアリング能力は質問力。質問力、大事。ディレクションやコミュケーションでの質問力の重要性。

質問力、だいじ。 web業界では「質問力」が とても重要なスキルです。 さまざまな場面で必要になるからです。 この業界の門戸をたたくときから必要です。 就職・転職時の面接での質問タイム 組織・チーム内での同僚、先輩や上司とのコミュニケーション クラ…

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

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

新聞の俯瞰性の高さとwebでの情報の見せ方についての考察

新聞のデザインについて。 新聞はパっと見て、ニュースを把握できる すばらしいレイアウトだよな〜というお話から。 瞬時にいまの時事ニュースが 把握できる可読性・一覧性の高さは なかなかwebでは再現できませんよね。 webのメディアは整列されてきれいに …

「おすすめ」と「オススメ」どっち?webサイトでの表現に迷ったら、Googleの検索結果が多いほうを採用しよう。

webサイトの表記で、 たまーにどっちの文言表記のほうが 表現としていいのか迷うことがあります。 たとえば「おすすめ」というワード。 カタカナ表記しているwebサイトもよく見かけます。 「おすすめ」 「オススメ」 「お薦め」 どれがよいでしょうか。 どの…

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

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

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

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

スマホサイトの推奨環境・動作保証端末はOSのシェア率で決める。OSのシェアがひと目で分かる「スマタブinfo」

スマホサイト実装・製作の際に、 どのOSを推奨しどの端末を動作保証するかは OSのシェア率を見て決めましょう。 動作保証範囲はサイト製作のはじめにクライアントと しっかり定義していないと、クライアントが 持っている古い一部の端末で表示がおかしいだと…

Slackの新着・未読をわかりやすく表示。サイドバーのチャンネルリストにバッジをつける方法。

Slackのサイドバーの新着・未読っていまいちわかりにくいし、 見づらいと思いませんか? 僕は長年Skypeを使用してSkypeに慣れすぎてたせいか、 いまいちSlackの未読表示が慣れなくて困っていたのですが、 未読がわかりやすくなる方法を見つけたのでご紹介し…

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

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

黒丸●になるパスワードを可視化するべきかの考察。フォーム最適化(EFO)

ログインや新規登録でのパスワード入力。 日常でさまざまなwebサービス、サイト、アプリを 利用しているユーザにとっては一番よく使うフォーム ではないでしょうか。 といってもログインが保持されていれば初回の入力 以降はめったに入力する機会がないかも…

会員登録フォームでメールアドレスを2回入力させるのどうなの問題。導入したらクレームの問い合わせが減った例

会員登録フォームでたまーにある メールアドレス間違え防止のためのフォーム、 ありますよね。 「確認用に再度メールアドレスをご入力ください」 というやつです。 メールアドレスを入力したすぐその下にあるやつですが、 これ意味なくない?というのが僕の…

空港サイトのリニューアル提案のときに考えたこと。言語が違っても認識できるピクトグラムの話

受託で某空港のwebサイトの保守業務を やっていたことがあり、デザインの フルリニューアルの話があがった際に 提案をだしたことがあります。 そのときに考えていたことや提案した内容の一部、 当時デザイナチームで話していたこと。 空港のWebサイトなので…

フォームの姓名、電話番号、郵便番号...など入力フィールドを分割するべきか問題

先日ツイッターで見かけた フォームの入力フィールドを分割するべきか問題。 一般的なフォームで、名前や電話番号の入力欄の分割をやめるよう指摘すると、DBの都合でできないと言われることがある。なぜDBのフィールドを分けるのか聞くと、「できるだけ細か…

ローマ字のヘボン式と訓令式の違いとファイル名やクラス名の命名規則の参考サイトまとめ

web製作にたずさわっているひとであれば ローマ字、よく使いますよね。 ローマ字にはヘボン式と訓令式という 方式があるのはご存知でしょうか。 先日自分はどっちも使ってるなぁと思ったので、 どういう違いなのか改めて整理と、 ついでにファイル名やID、cl…

多言語サイトでの言語切り替え実装方法。PHPでブラウザの言語情報を判定して切り替える

多言語で展開するサイトでは、 デフォルトはアクセスしたユーザの言語で 表示したい。 日本語対応している海外のwebサイトに アクセスしたら英語だったら切り替えるの面倒ですよね。 できれば自分のわかる言語ページがあるなら最初から その言語で表示してほ…

多言語サイトの言語切り替えのUIの考察

先日、受託案件で 多言語サイトの案件があったのですが、 そのときに少し考えた話。 多言語展開のwebサイトでは 言語の切り替え機能があります。 言語の切り替え機能は、 主に以下のUIパターンが考えられます。 プルダウンでの言語選択式 ヘッダ、フッタなど…

雑食系エンジニアTVのKENTAさんの名刺の考え方が勉強になる

エンジニアのキャリアハック情報を 発信しているKENTAさんのYouTubeを 最近見ているのですが、名刺の話が 勉強になったので、ご紹介。 エンジニアという職業における「名刺」の重要性について説明します。 デザイナ視点ではまず思いつかないなぁという 発想…

プロジェクト管理ツールはもういらない!サクッとプロジェクト管理できるGoogleスプレッドシートがおすすめ

みなさんプロジェクト管理ツール、 使っていますか。 今日は僕の勤めている会社ではどのように プロジェクトを管理して進めているか 紹介します。 いろいろ便利なプロジェクト管理ツールが ありますが、使用しているのは、 管理に使用しているのは、 Google…

SNSアイコンは公式のカラーにするべきか

先日webサイトのリニューアルのデザインの 打ち合わせの際にクライアントから質問されました。 「SNSアイコンって各SNSの公式のカラーじゃなくていいんですかね」 質問されたとき「おっ」と思いました。 というのもあまり意識したことがなかったからです。 S…

ゴシック体と明朝体が混ざったおもしろいwebサイトとロゴの話

webサイトでは、 ゴシック体、明朝体だいたいどちらかに 統一されていて、さらに使用するフォントの 種類は多くて3種類くらいまでが一般的 だと思います。 先日なにげにみていておもしろいフォントの webサイトがあったのでご紹介。 電通報のwebサイトです…