とあるweb屋の仕事術

とあるweb屋の仕事術

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

ロジックでデザインする

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

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

WebサイトのナビゲーションにHOME(トップページ)への導線は必要か

先日こんなツイートが話題になっていました。 大抵のWebサイトでロゴを押せばトップ画面に戻れるからメニュー画面の「HOME」は冗長だしはずしたい派な自分なのに、さっき初めて訪れたWebサイトでメニュー開いて「トップページどうやって戻るんや?...ロゴか…

【良記事ピックアップ】検索窓だけのトップページ!神戸市のWebサイトが攻めている件。

今回は良記事ピックアップというよりは、 いいサイトの発掘的な感じになります。 紹介するのは神戸市のWebサイト。 まずはご覧ください。 神戸市:トップページ トップページが検索の機能に特化している みてわかるとおり このサイトのユニークな点は、 トッ…

【良記事ピックアップ】歯科予約システムの治療履歴画面(基本〜応用、デザイン編)

良記事は何年たっても役に立つ。 デザイナーなら読んでおきたい 良記事ピックアップシリーズ第2弾。 今回紹介するのは、4本の記事で構成される デザイン設計、デザインフローのお話。 「デザインには正解がない、でも最適なものはある」 ということで、歯…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

新人若手Webデザイナー必見!なんとなくの感覚デザインはやめてロジックでデザインする

いまちょうど未経験からWebデザイナーになって 4ヶ月目くらいたった人の指導をしています。 そのほか、入りたてほやほやの新人も同時に 指導しています。 やはり知識や経験が足りないので デザインしてもらうと、設計がどことなく ふわふわとしていて、感覚…