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

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

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

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

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

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

スマートフォンサイトのコーディング 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の改善をして、速... 続きを読む

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

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

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

スマートフォンサイトを驚くほど速くする！高速化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... 続きを読む

HTML5アプリで簡単にジェスチャーを実装できるライブラリ QUOjs 【18日目】 ｜ クラスメソッド開発ブログ

2012/12/18 123 users ジェスチャー パフォーマンスチューニング iPhone 機能

モバイルHTMLシリーズ HTML5で追加されたinput要素のタイプはiPhone、Androidでどのくらい使えるのか  おすすめ iPhone、Androidで使える！撮ったその場で画像編集できるHTML5アプリを作ってみよう iOS6のSafariでサポートされるHTML5の機能 HTML5で使えるスマートフォンの機能 スマートフォンサイトのパフォーマンスチューニング スマートフォンサイト... 続きを読む

» スマートフォンサイトのユーザビリティを下げるアンチパターン | Webnoborder

2012/12/03 464 users ユーザーインタフェース ユーザビリティ アコーディオン 独断

モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました... 続きを読む

はじめてスマートフォンサイトを作る人へ。制作で気をつけたいポイント５つ ｜ Kana-Lier

2012/11/21 689 users スマートフォン 普及 普段私 担当者 ご依頼

スマートフォンの普及に伴い、スマートフォンサイト制作案件が増えてきている方も多いと思います。かくいう私もその一人です。 最近は一人でカバーしきれない程のご依頼をいただくようになり、新たに担当者を増やすことにもなりました。 普段私が気をつけている点、どういったことを考えてスマートフォンサイトを制作しているかを伝えることになったので、ついでに記事にしてしまいたいと思います。 私がスマートフォンサイトを... 続きを読む

ゼロからはじめるCSS3を勉強するために便利で参考になるCSS3ジェネレーターをまとめました | HTML5でサイトをつくろう

2012/08/08 442 users CSS3ジェネレーター CSS3 参考 HTML5 記述

スマートフォンサイトなど、最近はでデザイン要素に画像をあまり使わずにCSS3を使う場面が増えて来ています。 とくにボタンやボックス背景などはCSS3でつくれば要素に合わせて可変してくれるので、非常に便利ですし、HTML上のムダな記述も減らすことができ、きれいで理想的なソースになります。 また、iPhone4をはじめとするRetinaディスプレイの場合はデバイスフォントやCSS3でコーディングするこ... 続きを読む

スマートフォンサイトの表示確認に使いたい便利なツール×2 | 海外SEO情報ブログ

2012/08/02 225 users 海外SEO情報ブログ 表示確認

[対象: 中級]今日は、スマートフォン向けのサイトを検証するときに便利なツールを2つ紹介します。レスポンシブ・ウェブデザインでの表示を簡単に確かめられるブックマークレットとスマホでのページ閲覧をシミュレーションするアプリケーションソフトです。1. レスポンシブ・ウェブデザイン ブックマークレット1つ目はレスポンシブ・ウェブデザインがどのように機能しているかをチェックするブックマークレットです。こち... 続きを読む

スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました | ウェビメモ

2012/07/17 159 users PageSlide Facebook Path ウェビメモ

こんにちは、霙（@xxmiz0rexx）です。 スマートフォンサイトでのメニューの表示方法をあれこれ考えた結果、素敵なjQueryプラグインに辿り着きましたのでご紹介したいと思います。 コンテンツ量が多くてもメニュー分のスペースを考えずに構成できるのでかなり気に入っています :) jQueryプラグイン『PageSlide』 FacebookやPathなどで使われているあのメニュー表示の動きをjQ... 続きを読む

簡単なサンプルで学ぶ！ゼロからはじめるレスポンシブWebサイト初級編 ～メディアクエリを使ってCSSを分岐させる～ | HTML5でサイトをつくろう

2012/05/16 613 users CSS メディアクエリ サンプル XHTML HTML5

スマートフォンサイトとPCサイトの振り分けを考える上で、ひとつの選択肢となる「レスポンシブWebデザイン」。 そこで今回はレスポンシブWebデザインを使用したサイトの制作や仕組みを理解しておくためにCSS3のメディアクエリを使用してレスポンシブWebデザインのデモソースとチュートリアルをつくりました。 今回はXHTMLでコーディングしたソースで、CSS3のメディアクエリを使って、PC、タブレット、... 続きを読む

スマートフォンサイトで好まれるユーザーインターフェイス【リサーチ】 （1/4）：MarkeZine（マーケジン）

2012/05/01 594 users IMJモバイル MarkeZine ユーザビリティ調査 進化

IMJモバイルは、「スマートフォンサイトの情報表示方法に関するユーザビリティ調査」を実施した。調査期間は2012年3月2日～3月3日、有効回答数は826名から得られました。 調査結果概要　スマートフォンの進化により、サイト内での様々なインタラクティブUIを用いた表現方法が見受けられるようになりました。そこで、今回は複数のインタラクティブUI実例を用いたユーザーの操作印象について調査を行いました。　... 続きを読む

PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」[to-R]

2012/04/19 450 users ライブラリ to-R Check Tweet URL PC用

PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」 Check Tweet PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」を作成したので公開しておきます。 このライブラリを利用すると スマートフォンでPCサイトにアクセスした場合、指定したスマートフォン用のURLに転送されます。 PCでスマートフォンサイトにアクセスした場合、指定したPC用のURLに転送されます。 ス... 続きを読む

ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました | HTML5でサイトをつくろう

2012/04/18 1364 users レスポンシブWebサイト HTML5 マルチデバイス CSS

スマートフォンサイトとPCサイトの振り分けを考える上で、 ひとつの選択肢となる「レスポンシブWebデザイン」。 スマートフォンサイトの最適化とは違い、CSS3のメディアクエリ機能を使って、デバイスのサイズごとにCSSの読み込みを変更することによって、1ソースでマルチデバイスに対応したサイトを制作することができます。 しかし、その分ソースや読み込むCSSが多くなってしまったり、構成をしっかりと考えな... 続きを読む

PCサイトとスマートフォンサイトをどのように扱うか？国内のレスポンシブウェブサイトをまとめました | Webデザインクリップ｜Web制作に便利な情報を集めたまとめサイト

2012/04/12 502 users Webデザインクリップ Web制作 SEO 共通 選択肢

海外の企業サイトではレスポンシブルウェブサイトもだんだんと浸透しております。 Responsive Web Design を利用している企業サイトリスト 毎日更新したり、記事コンテンツの多いサイトでは、全デバイスのソース管理や更新が1ソースでできるレスポンシブウェブサイトの導入は一つの選択肢として魅力的です。 また共通のURLを使用することでSEOに強い面もあります。 Webフォントを使用すれば、... 続きを読む

iPhoneサイト（スマートフォンサイト）制作時の画像の表示方法と使用方法についてまとめました | HTML5でサイトをつくろう

2012/03/15 257 users iPhoneサイト HTML5 iPhone 制作時 画像

PCサイトでの画像の表示方法は、スライスした画像をimgタグにサイズ指定をしたり、背景画像に繰り返しや位置の指定をして表示するのが一般的ですが、スマートフォンサイトではデザインやコンテンツの内容によって画像の表示方法を工夫する必要があります。 特にiPhoneのように横画面にすると可変して表示されるデバイスの場合は、画像も可変して見せたほうが効果的な場合もあります。 また、iPhone4、4Sや高... 続きを読む

iPhoneサイト(スマートフォンサイト)制作のためにCSS3でPhotoshopのレイヤースタイルを再現する方法 | HTML5でサイトをつくろう

2012/03/06 105 users たくさん 最低限 CSS3 最適化 容量

スマートフォンサイトを制作する上で便利なCSS3。 必要最低限まで画像の使用を減らし、スマートフォンサイトのデザインをスムーズにコーディングすることができます。 また、画像を使わずにCSS3を使ってスマートフォンサイトのデザインを実現すれば、読み込み時間や容量の軽いサイトを制作でき、サイトの最適化へつながります。 最近では海外の便利なジェネレーターサイトがたくさんあり、誰でも気軽にソースをつくるこ... 続きを読む

スマートフォンサイトのUIパターンやフレームワーク・ツールなどをまとめたサイト -Mobile Tuxedo | コリス

2012/02/21 410 users コリス Mobile Tuxedo UIパターン

Archive by month 2012年2月 (32) 2012年1月 (32) 2011年12月 (37) 2011年11月 (40) 2011年10月 (45) 2011年9月 (52) 2011年8月 (46) 2011年7月 (42) 2011年6月 (51) 2011年5月 (46) 2011年4月 (45) 2011年3月 (33) 2011年2月 (43) 2011年1月 (40... 続きを読む

iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう | HTML5でサイトをつくろう

2012/02/16 430 users CSS reset.css 命令 記述 ソース

iPhoneサイト制作（スマートフォンサイト制作）をする上で、ソースの無駄な記述を最低限に抑え、通信速度を上げることが「最適化」へとつながります。 スマートフォンサイト用に最適化したcssを制作する場合、reset.cssの記述を減らすことで、重複する命令を減らして、読み込みのスピードを上げることができます。 今回はスマートフォンサイトを制作する上で、最低限必要となるreset.cssの記述につい... 続きを読む

画像を使わないでCSS3のグラデーションでスマートフォンサイトの背景パターンをつくろう | HTML5でサイトをつくろう

2012/02/13 322 users 容量 通信速度 外出先 グラデーション 機会

スマートフォンサイトを制作する上で重要となる「最適化」。 PCサイトとは違い、外出先や移動中などに見られる機会が多いスマートフォンサイトでは、できるだけ容量を抑えて通信速度を上げ、サクサクと閲覧できることがもとめられます。 スマートフォンサイト最適化のためには様々な方法がありますが、できるだけ使用する画像の容量を減らすこともその一つです。 今回は、スマートフォンサイト制作に便利な、CSS3のグラデ... 続きを読む

スマホサイトの確認に便利！PC（safari）でできるスマートフォンサイトの検証方法のやり方 | HTML5でサイトをつくろう

2012/02/06 109 users Safari iPhone コーディング 機種 検証

スマートフォンサイトを制作する際に、iPhoneやAndroid両方の機種での検証や、もう発売されていないようなOSのバージョンの対応も必要になる機会があるかもしれません。 本来ならば一通りの機種を用意して実機で検証できる環境が必要ですが、個人での制作や、ちょっとしたサイトのスマートフォンサイトの対応の場合もう少し手軽な検証方法が必要になります。 また、PCでコーディングなどのサイト制作時のちょっ... 続きを読む

WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの？ | Webクリエイターボックス

2011/12/20 459 users Media Queries WordPress リデザイン

以前「WebサイトをiPhoneで見やすくする5つの方法」という記事でWebサイトをスマートフォンに対応させる方法を紹介しました。当時はそこで紹介しているMobifyというサービスでスマートフォンに対応させていたのですが、JavaScriptが使えないので、リデザインを期に別の方法でスマートフォンに対応させる事にしました。タイトルにあるとおり、WordPressのテーマを変更する方法とCSS Me... 続きを読む