アクセシビリティ改善中！ LIFULL HOME'S スマートフォンサイト - LIFULL Creators Blog

2023/03/30 5 users LIFULL HOME 嶌田 Lifull 施策 ミッション

フロントエンドエンジニアの嶌田です。株式会社 LIFULL でプロダクトのアクセシビリティ向上をミッションとして活動しています。 本日は、不動産・住宅情報の総合サービスである LIFULL HOME'S のスマートフォンサイトにおいて、過去半年間で実施したアクセシビリティ向上施策をご紹介します。ご紹介する施策のうちいく... 続きを読む

Vue.jsほぼ初心者だけのチームで既存サービスのリニューアルをやってみて得られた知見 - エムスリーテックブログ

2019/04/23 138 users 知見 エムスリーテックブログ リニューアル fukubaya

こんにちは、エンジニアリンググループの福林 (@fukubaya) です。 2019年3月に僕たちのチームが担当するスマートフォンサイトをリニューアルしました。 リニューアルに際して、せっかくなので新しい技術やフレームワークを採用したいということで、詳しいメンバーはいませんでしたがVue.jsでリニューアルすることにしま... 続きを読む

IT業界で5年後も活躍できるデザイナーであるために学ぶべきこと - Life is bitter

2017/06/12 83 users デザイナー Life is bitter IT業界 5年後

2017 - 06 - 12 IT業界で5年後も活躍できるデザイナーであるために学ぶべきこと デザイン Bookmark! Facebook Twitter Google+ Pocket デザイントレンドや技術トレンドの移り変わりが激しいIT業界。 5〜10年も経つとPCサイトメインだったものがほぼスマートフォンサイト・アプリメインに置き換わったようにプラットフォームすら変わってしまいます。 UI... 続きを読む

ハンバーガーアイコンのUI問題６つの答え｜株式会社ストローバッグ|デザインラボ

2015/11/16 18 users 焦点 レイアウト 答え 記述 Webデザイナー

ストローバッグのWEBデザイナーの正木です。 この記事ではハンバーガーアイコンというUIの抱える問題の答えを通して、スマートフォンサイトでメニューの見せ方にどのようなパターンがあるのかご紹介します。 （この記事では、上記問題に焦点を当てていますので、アニメーション・メニュー展開後のレイアウトについての記述は割愛させて頂きます。） まず、スマートフォンサイトのメニューについて書く前に、ハンバーガーア... 続きを読む

ドメイン名を決めるのに苦労した、という話 - めぐりめぐる。

2015/11/12 13 users ドメイン名 CSS pro Google 費用

2015-11-12 ドメイン名を決めるのに苦労した、という話 はてなブログ「Pro」を契約しました はてなブログの「Pro」サービスに加入しました。はてなブログの無償版サービスだとスマートフォンサイトのCSSが自由に変更できなかったり、勝手にGoogleの広告が入ったり、キーワードリンクが目立つのが鬱陶しいと感じていたので、思い切って1年分の費用を払って契約しました（1年契約だと、8000円程度... 続きを読む

スマホサイトのSEO：モバイルフレンドリーテストと対応方法 | プロモニスタ

2015/11/06 11 users プロモニスタ 上位 SEO対策 増加 検索エンジン経由

スマートフォンサイトに必要なSEO対策、「モバイルフレンドリーアルゴリズム」について解説しています。モバイルフレンドリーテストの受け方と発見された問題への対処方法をご紹介します。スマートフォン利用者の増加とともに、検索エンジン経由のアクセスも、スマートフォンからのものが増えているかと思います。 そこで気になるのが、スマートフォンサイトを上位表示するためのSEO対策。 スマートフォンサイトを上位表示... 続きを読む

CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ | NxWorld

2015/06/19 525 users NxWorld クローズボタン エフェクト CSS 矢印

自分用に一覧化したのでシェアします。ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開している時などのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。よく見る「×」のようなクローズボタンに変化するものから矢印に変... 続きを読む

[Web制作]iPhoneサイトで表示崩れが発生した時、実機とMacを繋いでWebインスペクタ機能でデバッグする方法｜ウェビメモ

2015/05/19 89 users ウェビメモ iPhoneサイト Mac Web制作 実機

こんにちは、霙(@xxmiz0rexx)です。 スマートフォンサイトを制作している時、たまーに困ることがあります。 それは、実機でしか再現しない表示崩れ。 Macでみた時は大丈夫だったのに、何故かiPhoneでは謎の余白が…なんてことが先日もありまして、 解決のためにSafariのWebインスペクタ機能を使ってみましたので使い方をメモしたいと思います。 Webインスペクタ機能とは iPhoneで見... 続きを読む

スマホサイトのパーツをことごとく網羅！「スマートフォンサイトUI図鑑」がマジ良著だった件 | OZPAの表4

2015/03/16 99 users マジ 瞬間 子羊 アスキー・メディアワークスさん 良著

スマートフォンサイトを構築してて「このパーツなんて言う名前なのかな」「どうやって作るのかな」と言う瞬間は結構あるものです。 そんな悩める子羊を救う良著がKADOKAWA/アスキー・メディアワークスさんより発売されました。その名もCSS3&jQueryで作る スマートフォンサイトUI図鑑。 ありがたくも一冊ご恵贈頂きましたので、レビューしてみたいと思います。 いや、マジこの本オススメ。こう言う本、ほ... 続きを読む

レスポンシブだけが答えではない、Redboxの事例と調査結果に見るスマートフォンサイトとアプリ最適化 （1/2）：MarkeZine（マーケジン）

2014/04/28 28 users MarkeZine REDBOX ソルトレイクシティ 原題

3月25日～27日の3日間、米国 ユタ州 ソルトレイクシティで開催された「Adobe Digital Marketing Summit 2014」のレポート第3弾。今回は「モバイル端末でのサービス最適化」をテーマに、全米で人気の無人DVDレンタルサービスを展開するRedhotの事例（原題は「Mobile, the next frontier」）についてレポートする。 調査データから見るモバイルシフ... 続きを読む

スマートフォンサイトのコーディング Tips あれこれ | バシャログ。

2014/04/23 691 users バシャログ macky Latin 横幅 CSS

ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name=... 続きを読む

「超チューニング祭 ～ニコニコを超快適にしてみた～　in ニコニコ超会議３」の問題点 - Webサイトパフォーマンスについて

2014/04/16 628 users ニコニコ 現行 超チューニング祭 速度 2014-04-17

2014-04-17 「超チューニング祭 ～ニコニコを超快適にしてみた～　in ニコニコ超会議３」の問題点 来る2014年4月26日(土)・27日(日)に、「ニコニコ超会議3」が開催され、その中で「超チューニング祭 ～ニコニコを超快適にしてみた～」が開催されるそうです。 これは、現行のスマートフォンサイトのTopページのソースファイルを競技者がチューニングして、速度やデザイン・UIの改善をして、速... 続きを読む

WordPressスマホサイトだけ中サイズ画像に変換する方法 - cocowa

2014/03/29 45 users パソコン WordPress タブレット ファイルサイズ 投稿

サイト表示高速化のために、WordPressで作られたスマートフォンサイトだけ、フルサイズ画像から中サイズ画像に変換する方法を紹介しているページです。WordPressの投稿で画像を表示していると思います。私が記事を作成する時には、画像をフルサイズで指定しています。 パソコンやタブレットは画面サイズが大きいので、フルサイズ画像でいいのですが、スマートフォンサイトだとファイルサイズが大きくなりすぎて... 続きを読む

スマートフォンサイトの開閉するメニューとアクセシビリティ | Another Sky

2014/03/08 37 users アクセシビリティ another sky iOS メニュー

今週はスマートフォンサイトの実装を行いました。その中で、スマートフォンサイトではよく見られる、ボタンを押すとメニューが開閉する仕組みの実装がありました。実装後にiOSのVoiceOverを利用して動作を確かめたのですが、他のサイトを見ると上手く開閉することが出来ないメニューボタンがいくつか見つかりました。どのような問題が見られたか等をまとめてみたいと思います。 上手く開閉できないボタンの例 いずれ... 続きを読む

レスポンシブWebデザインやスマートフォンサイトに最適なメニューを実装できるプラグインやチュートリアル 25 | NxWorld

2014/02/13 180 users NxWorld ウインドウサイズ セレクタ アコーディオン

いずれもメニューを実装する際に便利なプラグインやチュートリアルで、もちろんPCサイトでも問題なく使えますが、レスポンシブWebデザインやスマートフォンサイトといったサイトを制作する際には特に便利なものです。サイドからスライドしてくるものやウィンドウサイズが狭まるとセレクタやアコーディオンに変化するものなど、見せ方も様々なタイプがあります。ずらっと並んではいますが、大まかに同じような動きをするものは... 続きを読む

株式会社DMM.comラボに転職しました - arimoつくったメモ

2013/12/16 48 users arimoつくったメモ iOS Androi ディレクション

2013-12-16 株式会社DMM.comラボに転職しました 2013年10月末をもって、前職のモバイル系IT会社を退職しました。 うっかり1ヶ月半ほどキラキラ無職となりましたが無事に本日社会復帰ができました。 前職では 新卒で入社し、ガラケーサイト、スマートフォンサイトのディレクションや運用、保守をはじめ、iOS、Androidアプリのバックエンドの設計・実装をやったり、ちょこっとAndroi... 続きを読む

【スマホ集客】あなたに「スマートフォンサイト変換サービス」が向かない3つの理由 | 集客チャンネル

2013/12/13 8 users 集客チャンネル スマホ集客 理由 あなた 3つ

スマートフォンサイトを作成する方法として、一からスマホサイトを作成するのではなく、現在あなたがお持ちのホームページを「スマホサイトに変換する」という選択肢があります。 と、いきなり「スマホサイトに変換する」と言っても、いまいちピンとこない方もいらっしゃるかもしれませんね。 PCサイトをスマホサイトに変換していくデモ動画があるので、以下の動画を見てください。(youtubeで再生されます。) shu... 続きを読む

既に５０％超えをしている業種も！スマートフォンのアクセス割合・率についての実例調査 | 【集客チャンネル】　ネット・ホームページ・webを活用した集客方法

2013/08/22 25 users 予測 国民 影響 スマートフォン契約数 社長様

ちまたでは、スマートフォンサイトへの対応が求められる声をよく聞きますが実際はどうなの？とお思いの社長様も多いかと思います。 実際に、私のお話する社長様も、スマートフォンサイトの対応をしようかどうかと悩まれていますが、実際にはそこまで影響がないんでは？と思われているようです。 スマートフォン契約数は2013年1月末に4,000万件を超え、国民の3分の1がスマートフォンを持つようになっています。予測で... 続きを読む

スマホに特化したアクセス解析「Pt engine」スマートフォンサイトのヒートマップが凄い！ | 男子ハック

2013/06/30 26 users Pt engine ヒートマップ 男子ハック JUNP_N

@JUNP_Nです。最近はスマートフォンからのアクセスが増えているということもあって、スマートフォンに最適化したサイトを作らないと…と考えている人は是非お試しください。「Pt engine」はスマホに特化したヒートマップは試してみる価値はありますよ！スマホに特化！スマホサイト内での動きや視点を解析できて凄い！ 無料高機能Webアナリティクス | Pt engine Ptengineは現在無料版の先... 続きを読む

スマートフォンサイトを驚くほど速くする！高速化9つのポイント | Find Job ! Startup

2013/06/25 589 users Startup JavaScri Find Job CPU

回線が細くCPUも弱いスマートフォンは、リッチなWebサイト表示が苦手です。しかし、地道な対策で表示速度が驚くほど変化するのも事実。 今回はスマホのWebサイト表示の高速化手法をまとめました。もちろんPC向けにも効果バツグンのTips集です。 Webサイトを劇的に高速化する9つのポイント １.画像を圧縮する ２.画像はサイズを指定して使う ３.画像は適切なサイズで使う ４.CSS/JavaScri... 続きを読む

スマートフォンサイトのhtmlコーディングメモ12個 | 株式会社LIG

2013/06/24 1115 users 株式会社LIG

display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color... 続きを読む

UIデザインの参考に！斬新で美しいUIをもったiPhoneアプリまとめ

2013/03/28 84 users iPhoneアプリ 美しいUI UIデザイン 参考 iOS限定

数あるアプリの中でも、UI（ユーザーインターフェース）が美しかったり、斬新だったりするアプリは、ユーザーに驚きや感動を与えます。 また、UIが優れたアプリというのは、アプリ制作は勿論のこと、スマートフォンサイト等におけるUIデザインの参考になります。 今回は、そんな「UIが特に斬新で優れたアプリ」をiOS限定ではありますが、いくつか紹介したいと思います。 Google Maps グーグル公式のマッ... 続きを読む

スマホサイトでよく見る感じのサイドからにゅっと出てくるメニューをjQueryプラグイン「Sidr」で作る｜skuare.net

2013/03/01 86 users Sidr jQueryプラグイン skuare.net 感じ

スマホサイトでよく見る感じのサイドからにゅっと出てくるメニューをjQueryプラグイン「Sidr」で作る Tweet Facebookをはじめスマートフォンサイトやアプリでは、メニューをタップするとサイドからにゅっと出てくるメニューが導入されて久しいです。 今回はSidr - A jQuery plugin for creating side menusを利用して、にゅっと出してみましょう。 sp... 続きを読む

【必見】スマホ対応の参考に！アプリやスマートフォンのギャラリーサイト「総まとめ」

2013/02/05 63 users 必見 アプリ 参考 総まとめ スマートフォン

こんにちは。 LINEのユーザー数が1億人をこえ、2013年におけるスマートフォンの利用台数は20億台に達すると言われています。 普段生活をしていて、電車や待ち合わせ場所でスマートフォンを触っている人をみかけない日はないといっていい時代になってきました。 そこで、今日はスマホ対応の時に使える、スマートフォンサイトやアプリのアイコンギャラリーを集めてみました！ 【日本編（スマートフォンサイト）】 i... 続きを読む

2013年はスマフォサイトを作りたい！参考にしたい人気スマートフォンサイト１９ ｜ iPhoneデザインボックス

2013/01/07 36 users iPhoneデザインボックス 本年 iPhoneサイト 新年

iPhoneデザインボックス » 2013年はスマフォサイトを作りたい！参考にしたい人気スマートフォンサイト１９あけましておめでとうございます。 どうぞ本年もよろしくお願い申し上げます。 新年ということで2012年に掲載したiPhoneサイトのWebデザインで多く閲覧されたスマートフォンサイトをピックアップしました。 2013年は、スマートフォンサイトを作ろうと思っている方は参考にしてみてください... 続きを読む