スマホ、レスポンシブの表示チェックが捗る時短テク
「スマホサイトのチェックが面倒」「JavaScriptのデバッグが大変」そんなときに便利なのが、Google Chromeの「デベロッパーツール」です。Chromeデベロッパーツールを使いこなすと、Web制作の面倒な作業を効率化できます。 この連載では、nanapiのフロントエンドエンジニアである手塚 亮さんが、コーダーやデザイナー、ディレクターの仕事の「時短」に役立つChromeデベロッパーツールの活用法を紹介します（編集部）。 レスポンシブの表示確認は大変 レスポンシブWebデザインのWebサイトをコーディングしているときに面倒なのが、「ウィンドウサイズごとの表示結果の確認」ですね。端末によって異なる画面サイズをいちいち調べて、ウィンドウサイズを合わせて確認していてはかなり手間がかかります。 そんなとき、Chromeデベロッパーツールの「Device Mode」が使えます。 Devic
国内初登場のハードも展示！ 3/28開催ASCII STARTUP主催イベント来場者募集中
3月28日（月）12時～18時、アスキーの開催するハードウェア・IoTプロダクトのセッション、ブース展示イベント“IoT＆H/W BIZ DAY by ASCII STARTUP”。前回は豪華セッションの内容をお届けしたが、今回はこちらも超豪華な展示ブースについてお届けする。話題のハードから、国内初登場となる新型ハードウェアも展示ブースに登場する。 ■■参加登録はコチラから！（Peatixの予約ページに遷移します）■■ 現状、セッションはすべて満席となってしまったが、展示ブースの入場チケットはまだまだ来場者を募集中。セッションの模様は、ブース展示会場内にサテライト観覧スペースも設置予定のため、セッションの内容も気になるという人もぜひ、応募してほしい。 展示ブースでは多くのハードウェア製品を開発する企業が、最新のIoTプロダクトやガジェットなどを展示する。ハードウェアベンチャーから、クラウド
SNSをやめる人が続出？ なぜTwitterは面白くなくなったのか (1/3)
かつての大学の教え子であるASCII.jp編集部の西牧氏から「最近、ソーシャルメディアに対して漠然とした、得も言われぬ違和感がある」というメールをもらい、ではその原因を考えてみましょうということでこの連載が始まった。 しかし、この「漠然とした、得も言われぬ」というところがかなりミソで、実は私も「それはね、こういうことが原因です」と即座に答えられるわけではない。 ただ、TwitterやFacebook、Flicker、YouTubeといったSNSが登場して今年でほぼ10年ということもあり、黎明期の理想像と現在の状況とのズレや、同時に進行しているインターネットを震源としたメディアの地殻変動、そしてわれわれを取り巻く情報環境の量的／質的な変容を考察してみると、何らかの手掛かりがつかめるかもしれないという気はする。 そもそも西牧氏の言う「違和感」は、おそらく、ある種の「残念感」と、一抹の「嫌悪感」
明朝体は絶滅するのか？ AXIS Font生みの親の挑戦
「明朝体はこのままだとあと20年もすればこの世から消えてしまうかもしれない」。独立系フォントベンダーであるタイププロジェクト社長の鈴木功さんはそう語る。鈴木さんはタイプデザイナーであり、デザイン業界で評価の高いAXIS Fontの生みの親として知られる人物だ。 事実、明朝体を目にする機会は激減している。PCのWebブラウザーはもちろん、スマートフォン、タブレットといったデバイスの基本フォントはいずれもゴシック体。ニュースは新聞ではなくニュースサイトやアプリでチェックし、知りたいことは本ではなくググるかFacebookで尋ねる時代。紙媒体ですら、ゴシック体で堂々と本文を組む書籍が増えた。私自身、Web業界の経験が長い新人編集者に、明朝体で組まれた新刊のゲラを「なんか読みづらい」と言われてしまった経験がある。 「気持ちが悪い」から始まった、明朝体の居場所作り 6年前。鈴木さんには忘れられないエ
SVGアニメを手軽に作れるLazy Line Painter｜こうめの“これから使える”jQueryプラグイン
「Lazy Line Painter」 は、最近流行のSVGを使ったパスアニメーションを手軽に作れるプラグインです。自分で描いた線画をSVG形式で読み込み、手で描いたような動きをつけて表示できます。 あまり複雑な動きはできませんが、「Tatenaga GIF」のiPhoneの線画のように、さりげなく取り入れるにはぴったりのプラグインです。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Lazy Line PainterをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。
「シングルページ」流行の7つの理由と最新事例まとめ (1/4)
「シングルページ」と呼ばれる、1ページで完結しているWebページを見かけることが多くなりました。シングルページの概要と、CSSフレームワークを使った実際のシングルページの作成を通して、シングルページのデザインの考え方や作成方法の知識を身につけられる連載をお届けします。解説はデザイナーの石嶋未来氏にお願いしました。（編集部） シングルページとは、1ページで完結しているWebページのことです。最近よく見かけるようになりましたね。シングルページのみを集めたギャラリーサイトなどもあり、Web制作に携わっている方であれば一度は目にしたことがあると思います。 シングルページで作られたサイト。左から、モバイルセキュリティソフトウェアのLookout, Inc,（https://www.lookout.com/）、「重陽」ブランドの包丁を製造販売している堺菊守 河村刃物株式会社（http://chouyo
SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
アクセス解析による改善提案の3ステップ
アクセス解析を実施することで、Webサイトの改善につなげられます。アクセスログデータを制作会社側で取得できる場合は、データをもとにしたWebサイトの改善策をクライアントに提案できないか検討しましょう。 改善提案は、ユーザー分析による改善、参照元分析、コンテンツ改善の3ステップで実施していきます。 ユーザー分析による改善 ユーザー分析とは、Webサイトを訪れたユーザーがサイト内でどのように行動しているか、どんな傾向があるのかを把握し、分析することです。 たとえば、ECサイトで初めて訪れるユーザー（新規訪問者）とリピーターの購買率（コンバージョン率）を比較するとします。ユーザー分析で新規訪問者のコンバージョン率が低いことが分かれば、初心者向けの購入ガイドを充実させる、初回購入者向けのキャンペーンを展開するといった施策が検討できます。 参照元分析による改善 参照元分析とは、Webサイトを訪れたユ
新Webエンジン「Blink」—GoogleはなぜWebKitを捨てたか？ (1/3)
先週、Webブラウザーの世界にふたつほど衝撃的なニュースが走った。ひとつ目はMozillaがSamsungと共同でプログラミング言語Rustをベースにした新Webレンダリングエンジン「Servo」の開発を進めていくと表明したこと、そしてもうひとつが今回の主題、GoogleがWebKitを離れて「Blink」への移行を表明したことだ（開発者向けバイナリーを配布するGoogle Chrome Canary（28.0.1468.0 canary）では、すでにBlinkが含まれている模様）。 Mozillaの抱えるGecko、AppleとGoogleが推進するWebKit、そしてMicrosoftのTridentの3つは、Webブラウザー業界においてシェアのほとんどを握る3大勢力となっている。その勢力のうちのふたつが従来の技術とは別の新しいエンジン採用と開発推進をほぼ同時に発表したことは、今後のト
巨人AT&Tをも動かしたAPI「Twilio」の衝撃
「Twilio」（トゥイリオ）という企業（あるいはサービス）をご存知だろうか？ 500 Startupsや Union Square Venturesなどの投資家から3400万ドルの資金を集め、サンフランシスコでいまもっとも注目されているスタートアップ企業の1つだ。 Twilioが手がけるのは、VoIP（Voice over Internet Protocol）の機能をWeb APIとして開発者向けに提供するクラウドサービス。Twilioのサービスに登録した開発者はREST方式のAPIを呼び出すことで、一般の固定電話や携帯電話に発信したり、かかってきた電話を着信したりできる。TwilioはAPIの利用料を開発者から徴収するビジネスモデルだ。 と、ここまでの説明だけではTwilioがなぜそこまで注目されているのか、分かりづらいかもしれない。正直なところ、この記事を書いている私も当初「おもしろ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
あの有名サイトの裏側をのぞく