スマホはメニューバーが命！！ スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。 ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。 ただそのデザイン、「なんとなく」のものになっていませんか？ 違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。 今回は100のスマホサイトを調査し、その中で代表的な36サイトから7つのメニューデザインに分類し、まとめてみました。 自分のスマホサイトの性質を考えながら、もっとも適切なメニューを探していきましょう！ 100のスマホサイトから見る、 スマホメニューの人気ランキング 上図は、100のスマホサイトをランダムに抽出し、それぞれのサイトで採用されているメニューの割合を調査した結果になります。この結果によれば、一位が圧倒的な割合で

ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTML と CSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。 ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ コンテンツ目次 1. アコーディオンメニュー 2. サークル型ナビメニュー 3. ドロップダウンメニュー 4. フルスクリーンメ

デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの

前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい（動き）、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない

GMOサイバーセキュリティ byイエラエ（旧オハコ）は、サービスデザインやUX/UIデザインを中心に、企画、設計、デザイン、開発、運用、グロースとワンストップでお客様のパートナーとして伴走いたします。また、デザインだけでなく、ビジネスとテクノロジーのプロフェッショナルによるチームがお客様とワンチームとなり、事業成果にコミットいたします。

GMOサイバーセキュリティ byイエラエ（旧オハコ）は、サービスデザインやUX/UIデザインを中心に、企画、設計、デザイン、開発、運用、グロースとワンストップでお客様のパートナーとして伴走いたします。また、デザインだけでなく、ビジネスとテクノロジーのプロフェッショナルによるチームがお客様とワンチームとなり、事業成果にコミットいたします。

単一のウェブページの装飾やレイアウトを、画面の横幅サイズにあわせて変化させる「レスポンシブ・ウェブデザイン」。 管理するファイルがひとつで済む、どんなデバイスにも対応できる等大きなメリットがありますが、同じコンテンツをどんなデバイスサイズでも快適に閲覧できるようにデザインするのは至難の業です。 とくにユーザビリティが重要な役割を担う入力フォームにおいては、どのような工夫をしたら良いのでしょうか。 本日の記事では、レスポンシブ・ウェブデザインのフォームを設計するときに気をつけるべきポイントについて考えてみたいと思います。 ※今回は新たにフォームを設計する前提で書いていきますが、もちろん、すでにお持ちのフォームを改善する場合でも活用していただければ幸いです。 ステップ1: 独自レイアウトを用意する EFOのテクニックのひとつに、フォーム専用のレイアウトを用意するというものがあります。 これはフ

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

私たちがこの先も「永久ベンチャー」の旗印を掲げ続ける理由 日本を代表するIT企業を育て上げた創業経営者が描く「これから」 株式会社ディー・エヌ・エー　代表取締役会長 南場 智子 「必要とされる存在」であり続けるために、変化を恐れてはいけない 30年間の経営者人生が導き出した新たな「経営スタイル」 株式会社 USEN-NEXT HOLDINGS　代表取締役社長CEO 宇野 康秀 24時間365日100%経営に集中し勝負どころを見極めよ 2度の大きな経営戦略の転換で、『Ameba』を国内屈指のインターネットメディアへと育てあげた卓見の開拓者 株式会社サイバーエージェント　代表取締役社長 藤田 晋

人々の「自立支援」のサービスをメインに展開。 ■ITプロパートナーズ事業(起業家・フリーランス支援事業) ■IT プロクラウド事業(在宅ワーカー支援事業) ■IT プロカレッジ事業(オンライン PG 教育事業) ■intee 事業(新卒向け就職支援イベント事業)

日本の未公開ベンチャー企業による資金調達の総額は、2006年から2013年まで下降・低迷していましたが、2016年の1年間で2099億円と2006年の集計開始以降で最高額となったことが、ジャパンベンチャーリサーチ（JVR）による集計で明らかとなりました。 2017年も各社から資金調達についてのプレスリリースが出ていますが、2017年7月に発表された注目の資金調達についてまとめました。 2017年7月は、起業サプリジャーナルでインタビューさせていただいたMiewやラブグラフが資金調達されています。 CONCORE’S(コンコアーズ) 建設現場向けの業務改善プラットフォーム「Fhotoruction(フォトラクション)」を提供しているスタートアップのCONCORE’S(コンコアーズ)（2016年3月14日設立）は、7月4日、ジェネシア・ベンチャーズ、SMBCベンチャーキャピタル、みずほキャピタ

TECHBLITZ編集部では今回、「AR（拡張現実）/VR（仮想現実）」に関連するOverviewや幅広いカテゴリーの世界の最新スタートアップ情報に焦点を当てた「AR/V...

世界は「スマートフォンからテクノロジー」へと潮流が変化している。この流れは日本の“強み”が生きる機会となるはずだ。世界がこれから注目すべき、日本のスタートアップ50社を選出した。 ■リバーフィールド 東工大発、医療ロボットベンチャー。空気圧の精密制御技術を用いた内視鏡操作システムや、次世代手術支援ロボットシステムを開発。 創業者：原口大輔 創業年：2014.5 資金調達：東レエンジニアリング、beyond next ventures、ジャフコから約8億円 ■カブク 目指すは「モノづくりの民主化」。個人、法人向けの3Dプリンターを用いたワンストップ製造プラットフォーム「rinkak」を提供。 創業者：稲田雅彦、足立昌彦 創業年：2013.1 資金調達：グローバル・ブレイン、電通デジタルHDなどから約10億円 ■リキッド 生体認証のみでの超高速決済「Liquid Pay」を世界初の規模で実現。

環境に配慮したサステナブルなファッションを展開する「ヘリテッジ」＊ヘリテッジ社は2023年12月13日22:00までイークラウドで株式投資型クラウドファンディングを実施中。当社を応援したい出資者を募集しており、投資して株主になることができます。 https://ecrowd.co.j… 国内最大級のPRプラットフォームを運営する「PR TIMES」を徹底解剖昨今の世の中は情報過多と言われるほど、昔とは比べものにならないくらいより多くのモノを見聞きしている時代である。昔は今ほど高度でかつスピーディーに技術進歩があった訳ではなく、ある程度質の良い商品・サービスを開発できればその…

FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

オンカジボーイ オンカジ歴9年の老舗プレイヤー。累計獲得賞金は8桁超え。大手ベラジョンからマイナーなオンカジまで幅広くプレイする。 オンカジの認知度が上がって、オンカジに興味を持つ人が増えてきましたね。 日本語に対応したオンカジもあり、日本円でのプレイが可能なオンカジも登場しています。 でもいざ遊ぼうと思って検索すると、思っている以上にたくさんのオンカジが出てきて戸惑う人もいるのではないでしょうか？

コンテンツマーケティングのコンサルタントとして過去7年で70社のオウンドメディア運用を支援に携わる。クライアントは医師、歯科医師、弁護士、税理士、司法書士、ファイナンシャルプランナー、ヨガインストラクター、パーソナルスタイリスト、上場企業のマーケティング担当者など多岐にわたる。 サイト公開からわずか10ヶ月で14.6億円の生み出す不動産投資メディア、契約率40%程度の理想的な見込み客が集まるブランディングメディアなど数々の成功事例を生み出してきた。「ユーザーに集中すれば結果はついてくる」をモットーに年間4,000件以上のコンテンツ作成に携わっている。 …続きを読む コンテンツマーケティングのコンサルタントとして過去7年で70社のオウンドメディア運用を支援に携わる。クライアントは医師、歯科医師、弁護士、税理士、司法書士、ファイナンシャルプランナー、ヨガインストラクター、パーソナルスタイリスト

コピースロット 「コピースロット」は、3つのキャッチコピーの一部分を組み合わせて1つのキャッチコピーが作れるWebサービスです。 回っているスロットの部分をクリックするだけで、誰でも簡単に面白くてユニークなキャッチコピーを作成することができます。 つくったキャッチコピーは”#コピースロット“というハッシュタグと一緒にTwitterに投稿できます。一時期このハッシュタグが、Twitterのトレンド入りするなどして話題となりました。 ili（イリー） iliは、話した言葉を自動で音声翻訳をしてくれるウェアラブル翻訳デバイスです。 ボタンを押しながら話すと、自動的に外国語に翻訳してiliがそのまま喋ってくれるので翻訳者がすぐ隣にいる感覚になると言います。開発元は、指輪型のウェアラブルデバイスの「Ring」を開発したLogbar Inc.。ポイントとしては、ネットの接続が不要で翻訳することが可能だ

［53選］国内注目のWebサービス・アプリを大調査！ プログラミング言語、フレームワーク、アーキテクチャの一覧【2017年】 星の数ほど存在するWebサービスやアプリ。その裏側を覗いてみると、開発当時のトレンドや開発者の設計思想が見えてきます。53サービスのフレームワークやアーキテクチャ、開発効率化ツールを集めました。 国内だけでも星の数ほど存在するWebサービスやアプリ。その裏側を覗いてみると、開発当時のトレンドや開発者の設計思想が見えてきます。 今回は53サービス（追記を含む）のフレームワークやアーキテクチャ、開発効率化ツールを集めました。選定理由もお答えいただけたサービスについては、アーキテクチャを選んだ理由も紹介していきます。 C2C、コマース メルカリ、ココナラ、BASE、Tokyo Otaku Mode、STORES.jp、Snapmart、IQON 情報サービス グノシー、価

ウェブサイトを魅力的に仕上げるだけでなく、ユーザーの注目を集めることができる、アニメーション・エフェクト。今回は、サイトコンテンツ表示に活用できる、HTML/CSSのみで実装できるホバーエフェクトをまとめています。 CSS3 を駆使したスタイリングは、コピペで利用することもでき、他と差のつくデザインエフェクトを、手軽に実現することができます。そのままコードを編集し、動作を確認することもできるので、今後のデザインプロジェクトに活用してみてはいかがでしょう。 詳細は以下から。 ウェブデザインを魅力的に仕上げる、HTML/CSSホバーエフェクトまとめ HTML/CSS/JS をクリックすると、各コードやスタイリングを確認でき、Result で実際のエフェクトを試すことができます。Return をクリックすると、読み込みを再度行います。 マウスホバーで、タイトルをモザイク状に表示。 See the

アニメーション（英: Animation）は、ウェブデザイン制作で必要とされる人気トレンドのひとつです。かろうじて気付くような控えめなローディングから、映画のような体験を提供するページ遷移まで、あらゆるデザインに採用されています。 ウェブサイトへのアニメーション実装を検討しているデザイナーには、無料プラグインが豊富に用意されています。デザイン的要素の強いものから、ユーザーエクスペリンスを向上させるものまで、さまざまなアニメーションを作成できます。 今回は、ウェブデザイナーが確認しておきたい、アニメーション用プラグインとライブラリ75個をまとめてご紹介します。利用するケースやアイデアに応じて、これらの素材を活用してみましょう。 ウェブデザイナーが試したい、ウェブアニメーション無料プラグイン、ライブラリまとめ 01. Animate.CSS Animate.CSS は、クロスブラウザ対応の基本

作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana