こんにちは、久保田です。今日はオンラインショッピングや物件検索などで使用される、検索画面や検索時に使われるUIを見ていきたいと思います。検索と一口に言っても、用意されたカテゴリーの中から1点選ぶものから、複数項目を選べる複雑な検索など様々です。そもそも検索はユーザーが目標物にたどり着くための便利な機能ですが、選択項目が多かったり、各条件が関係し合っている場合などは、見せ方を工夫しないと検索そのものが役に立たなくなってしまいます。事例をあげながら見ていきますので、検索機能のデザインをする際の参考にしてみてください。 もくじ大きく3構成にてご紹介していきます。 よくある検索方法複雑な検索（詳細検索）工夫されたUIやデザインパターン 1. よくある検索方法例えば、オンラインショッピングサイトで買い物をするとき、サイトトップページからユーザーはどのように検索をするでしょうか？国内の主要なECサイト

数多くのブログで2017年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、コンテンツファースト、レイアウトの多様化、フラットデザインやミニマリズムの進化、アニメーションの重要性、コミュニケーション・コラボレーション、AR/VR。 2017年のトレンドカラーは、フレッシュなグリーン。 参考: 2017年のトレンドカラー「グリーナリィ」と春のトレンドカラー10色 2017年、Webデザインのトレンド 2016年に人気が高かったインターフェイスのデザイントレンド 2017年、Adobe社のデザイン予測 2017年、Web制作業界全体の流れ 2017年、注目されているデザイナー・デベロッパーのツール 2017年、WebデザインのUIにおけるトレンド 2017年、Webデザインのトレンド まずはWebデザインのトレンド

【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・

LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog saegusa2017-04-16Yoshihiro was a network engineer at LINE, responsible for all levels of LINE's infrastructure. Since being named Infra Platform Department manager, he is finding ways to apply LINE's technology and business goals to the platform. こんにちは。LINEでネットワークやデータセンターを担当している三枝です。2017年1月にJANOG39で登壇する機会を頂きましたので、今回

今回はオールアバウトのnnmrが弊社サイトAll About Japanの速度を高速化した経緯についてまとめます。 All About Japanとは そもそもAll About Japan（以下AAJ）とは何かといいますと、弊社が提供している訪日外国人向けの日本紹介サイトです。 外国人向けサイトで、英語、中国語（繁体字）、中国語（簡体字）、タイ語、韓国語の5か国語に対応しております。 「Anime」「Izakaya」「Ninja」といったような特集や、実際に観光する人向けのモデルルート記事が特色です。 ■ 特集 (url : http://allabout-japan.com/en/tag/sushi/ ) ■ モデルルート記事 (url : http://allabout-japan.com/en/article/222/ ) 技術的な紹介 LAMP環境です。 （サーバー構成は後に記述

以前少しだけElasticsearchを触った時に、自分流Elasticsearch入門 - $shibayu36->blog; というElasticsearchに入門した時のメモをまとめていた。しかし、その頃はElasticsearchを使って完全に一人で一つの機能を作るというところまではいけなかった。 最近になってまたElasticsearchを一から導入する仕事をすることになった。この時以前自分がまとめた記事を読みながらやっていたのだが、実践で一から導入するためにはこの記事だけでは知識が足りなかった。 そこで、前の記事の知識をベースに、一から導入するために少しずつ学んでいき、自分のブログにまとめるなどのことをしてきたので、今回はその締めくくりとして、知識ゼロからElasticsearchを使えるようになるために学習したことについて書いておきたいと思う。 今回書くこと・書かないこと 今

ホームページを作成する時、必ず迷うのが「配色」です。 専門的な人材がいれば問題ないのですが、一人のWebの担当者で全てまかなわないといけないような会社も多くなっています。色について学ばないまま何となく配色してしまうと、締りがなかったり、印象が曖昧なホームページに仕上がってしまいます。 そこで「自分は色彩センスが無いから…」と嘆いているWeb担当者様。諦める必要はありません。 ホームページの配色は、色の基本とちょっとしたルールを押さえれば、それなりのものに仕上げることができます。 今回は、プロのデザイナーでなくても良い配色ができるようになるための、色彩に関する基本と色を選ぶときのコツをご紹介します。 ホームページ以外の制作物（企画書など）にも使えるテクニックなので、ぜひ覚えてみてください。 色の基本中の基本。色の三属性について 色は色相、彩度、明度の3要素で構成されています。 まずはそれぞれ

入門から始める！CSSを学習できるサイト18選【初心者向け】 プログラミング初心者向けに入門向けのCSS学習サイトをまとめています。HTMLを勉強したら同様にCSSも覚えなければなりません。CSSの勉強をこれから始めるという人にもおすすめの学習サイトです。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査 無料でプログラミングを学習できるサイトの中から、CSSを学べるものやそれに特化したものをまとめました。 どの学習サイトも初心者向けで挫折し

ブログの収益報告されている情報を集めまくってブログの収益報告の平均統計を出してみました。数値を出してわかったことをまとめています。結構なボリュームになったので、時間がある時にでもお読みください。 上図: 今回調べた50のブログの平均PVの推移 月末月初になると各ブロガーさんが運営ブログの収益報告を発表したりしていますが、１ヶ月ごとに色んなブログからの情報が来るためにまとまった情報を調べたいと思ったことがキッカケです。ブログ運営をしていて、アドセンスやアフィリエイトでお金を稼ごうと思っている人の参考になれば。 Webに公開されている収益報告情報をとにかく調べて、Excelにポチポチと数字を入力していく作業は大変でしたが、調べていく内に各論としての「稼げるブログと稼げないブログの違い」が見えてきたり、集めた数字から総論として「ブログで稼ぐためには何が大切なのか」が少し見えてきました。 ブログ運

Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな

iOSDC2016というiOSに関してのカンファレンスが2016年8月19日と20日にありました。 参加してみて、とても楽しく、ためになる発表がたくさんありましたので、いち早くシェアすべく、ここに発表資料などをまとめました。 資料は随時更新します。編集リクエストをいただければ、すぐに反映します。 動画 前夜祭 Track A 前夜祭 Track B Track A Track B 発表資料 ユーザーに受け入れられ、問題を起こしづらい大規模リニューアルの進め方 https://speakerdeck.com/shoby/yuzanishou-keru-rerare-wen-ti-woqi-kosiduraida-gui-mo-riniyuarufalsejin-mefang http://niwatako.hatenablog.jp/entry/2016/08/19/181554 Swift

はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事

非同期処理ってよく聞くけどどういうことなのかいまいち分かっていなかったので、JavaScriptを題材に勉強がてら基本的なところをまとめます。 非同期処理ってなに？ プログラムって実行すると、コードを上から順に1行ずつ実行していきますね。 その処理の1つに時間のかかる処理があると、その実行が完了するまで、次の行には進みません。 例えば次のようなコード。実行環境はNode.js (v5.3.0) です。 処理の途中で5秒間sleepします。 console.log("start"); function sleep(milliSeconds) { var startTime = new Date().getTime(); while (new Date().getTime() < startTime + milliSeconds); console.log("sleepが完了しました。");