知らないと絶対損する！WebデザイナーのためのChrome拡張機能7選
CSSの調整、フォントの調査、画像の作成など、Webデザイナーの作業効率をアップさせるChromeの拡張機能を紹介します。 Webデザイナーなら自分なりの仕事のやり方があると思います。コードを書きながらブラウザー上で直接デザインしている人、ブラウザーは実装テストの時にだけ使う人、どんな人でもWebデザイナー向けのChrome拡張機能を使えば普段の作業が見違えるほど簡単になります。私は一番煩わしいと思っている「ちょっとした作業のために大掛かりなソフトを起動すること」をはじめ、Webデザインでありがちな問題を解決するために、Chrome拡張機能を探しています。 これなしではやっていけないほど便利なChrome拡張機能を7つ紹介します。普段Firefoxで作業をしているなら（Web開発者ならすべてのブラウザーでクロステストするはずですが）、Webデザイナー向けのFirefoxの6つの拡張機能が参
センスがないノンデザイナーの味方！海外発の人気デザインツール「Canva」が上陸
Facebookに投稿する画像やちょっとしたバナーをセンス良くサクッと作りたい。そんなときに便利なデザインツール「Canva（キャンバ）」がオーストリラリアから日本にやってきました。 Canvaは、Webや印刷に使えるグラフィックをブラウザーまたはiOSアプリ上でデザインできるサービス。「バナー」「チラシ」「ポストカード」「名刺」「プレゼン資料」など、あらかじめ用意された膨大なテンプレートの中から用途と好みに合ったデザインを選択し、文字や画像、色などをカスタマイズして仕上げることができます。
見逃していない？ 2017年に生まれたWebデザインの5つのトレンド
2017年、すでにすばらしいことがたくさんありましたが、新しいWebデザイントレンドも生まれてきています。今年はWebデザインの見た目を一新するビジュアルトレンドがたくさんあります。その中にはユーザーエクスペリエンスを少し向上させるようなものもあります。 Webデザインにおいてユーザーエクスペリエンスが重要であることは否定できませんが、だからといってビジュアル面も無視できません。というのは、感情に訴える優れた魅力あるデザインかどうかが、ユーザーにそのWebサイトを「体験」したいと思わせられるかどうかに影響するからです。 この記事ではWebデザインの創造性を一新してくれる、2017年の5つのビジュアルトレンドを紹介します。 1. セリフフォント Webタイポグラフィの世界ではしばらく、サンセリフフォントが優勢でした。Maven Pro、Futura、Helvetica Neueなどの美しいフ
脱ネイティブ！Googleが推進する「PWA」にたった数時間で対応する方法
Googleが昨年発表した、Webアプリをネイティブアプリのように使えるようにするしくみ「PWA（Progressive Web Apps）」が話題です。既存サイトをPWA化する方法をサンプルコードをもとに解説します。 ここ最近はプログレッシブWebアプリ（Progressive Web Apps、PWA）の話題をよく耳にするとともに、これが未来のWebなのかどうかが議論の的になっています。ネイティブアプリ vs PWA論争に加わるつもりはありませんが、PWAがモバイルデバイス対応を強化し、ユーザーエクスペリエンスを向上することだけは確かです。2018年までにはモバイルからのアクセス数がほかのすべてのデバイスからのアクセス数を上回ると予測されるなかで、どうしてこの流れを無視できるのでしょうか。 良いニュースは、PWAの作成は難しくないということです。実際のところ既存のサイトをPWA化するこ
なんじゃこりゃ！かっこよすぎる3Dマップが作れるeegeo.jsにしびれた！
まるでゲームのような豪華で楽しい3Dマップをブラウザー上に手軽に表示できるWebサービスAPIの登場です。現時点では日本地図は対応していませんが、とてもわくわくするサービスですね。 eegeo.jsは、人気の地図ライブラリーLeafletをベースにしたオープンソースの3DマップAPIです。 シンプルな2Dマップを埋め込んだり、作成したりできる地図ライブラリーはたくさんあります。特に有名なのはGoogle Maps、Bing Maps、HERE、Mapbox、OpenStreetMapです。また、地図抽象化ライブラリーとして人気の高いOpenLayersやLeafletなどでは、アプリケーションの仕組みはそのままで、地図の「ベースレイヤー」を変更できます。 Google Earth APIの使用がNPAPIのセキュリティを理由に非推奨になったことで、3DマップAPIの選択肢は限られてしまいま
サンプルで学ぶwebpack 2入門：Web開発を超効率化する必須ツールの使い方 - WPJ
タスクランナーに代わって、ここ最近人気が高まっているビルドツールといえばwebpack。「難しそう」「面倒くさそう」——まだ導入していないなら、いますぐ試してみる価値はありそうです。 webpackは現在のWeb開発シーンにおいてもっとも重要なツールになりました。基本的には自分のJavaScriptファイルにほかのモジュールをバンドル（1つに束ねる）してくれるものですが、ほかにもHTML、CSS、さらに画像といったフロントエンド開発で使うファイルすべてに適用できます。webpackを使えばアプリからのHTTPリクエストの数をうまく制御できますし、ほかのツール、たとえばJade、Sass、ES6も使用できます。npmからほかのパッケージを参照するのも簡単です。 この記事ではwebpackを使うのが初めての人を対象に、初期設定、モジュール、ローダー、プラグイン、コードの分割、稼働中のモジュール
たった2時間でWebサイトのUXを劇的に改善する5つのテクニック
UXを大げさに捉えていませんか？ ちょっとした工夫でユーザーの負担を軽減し、気持ちよく操作できるようにする5つのテクニックを紹介します。 Webサイトを作り終えたら、できるだけ早く公開したいものです。しかし、すぐに公開することの犠牲もあります。重大なUX要素を見逃し、ユーザーにとって使いにくいWebサイトができ上がってしまうのです。 問題は、公開前に「近道」をすると、1時間かそこらで解決できたであろうUXのミスのために、長期的にWebサイトを使い続けてくれるユーザーを永遠に失ってしまうことです。この記事ではすばやくUXを改善する簡単な技を紹介します。 1. ユーザーに計算させないこと ■シナリオ：「この投稿は新しいものか？」 いま読んでいる記事が今日、昨日、または先週公開されたものなのか調べようとした経験は誰にでもあると思います。そして公開日を探そうとWebページをくまなく探し回り、ようや
面倒な作業も発狂しない！Web制作を超効率化するgulp.jsの始め方（2017年版）
面倒なWeb制作の作業を効率化できるタスクランナー。もう使っていますか？ 現在もっともポピュラーなタスクランナーであるgulp.jsの使い方を解説します。 開発者は、限りある大事な時間をコーディングに費やします。たとえ面倒な会議をさぼっても、仕事時間の大半は地味な作業に奪われています。 テンプレートとコンテンツファイルからHTMLを生成する 新しい画像と変更された画像を圧縮する SassをCSSコードにコンパイルする スクリプトからconsoleとdebuggerのステートメントを削除する ES6をブラウザーとの互換性が高いES5に変換する コードの埋め込みと検証 CSSとJavaScriptファイルの連結と縮小 開発サーバー、ステージングサーバー、運用サーバーにファイルを展開する なにか変更があるたびに、作業は繰り返されます。作業を繰り返すうちに、一番優秀なエンジニアでさえ画像のひとつや
レスポンシブの常識が変わる!? 君はエレメントクエリーを知っているか？
レスポンシブWebデザインで使うメディアクエリーを進歩させ、要素ごとに条件を設定できる「エレメントクエリー」。どこがどう便利なのか？ 専用ライブラリー「EQCSS」による使い方を紹介します。 CSSのメディアクエリー（Media Query）を使い、画面幅に基づいて要素の表示方法を変える方法はもうおなじみでしょう。エレメントクエリー（Element Query）はメディアクエリーと似ているものの、なんとビューポートではなくWebページ上の個々の要素にレスポンシブな条件を適用します。条件とは、たとえば、要素の幅、含まれる文字数、ユーザーのスクロール状況などで、要素に異なるスタイルルールを適用できるのです。 エレメントクエリーが必要とされる理由 最初に述べたように、エレメントクエリーはビューポートの幅と高さだけでなく、たくさんのプロパティに基づいて要素をスタイリングするのに役立ちます。ほかにも
Webサイトをもっと楽しく！モダンでスタイリッシュなGIFアニメの使い方5つ
スマホの普及、マイクロインタラクションの導入と合わせて、再評価されているGIFアニメを使ったUIデザイン。Webサイトを楽しくする活用法を5つ紹介。 ユーザーエクスペリエンスとは、「使いやすさ」だけではなく、製品やWebサイトをより心地よく、そして楽しく使えるようにすることです。Webサイトをおもしろくする方法には、注意を引くトランジション、インタラクティブ性、ビジュアル要素を取り入れる手法がありますが、GIFとCSSを組み合わせることで実現できます。 この記事では、邪魔になったり、大げさになったりすることなく、ユーザーエクスペリエンスの向上を目的としたモダンでスタイリッシュなGIFおよびCSSの使用法について例を挙げます。GIFはもはや、ネコの画像を見るためや、サボっている同僚をからかったりするためだけのものではありません。 デザインや開発しているWebサイトの訪問者を、GIFやCSSを
モバイルファーストからモバイルオンリーへ 2017年のWebを大胆予測
2017年のWebはどう変わる？ Web開発者歴20年を超えるコンサルタント／テクノロジーライターであるCraigが、2016年を振り返りながら予測します。 ここ何年かの間、私はその年の予測を立てています。外れることも多いのですが、今年も発表しましょう。 2016年の結果を振り返る 2015年に私が立てた10の予測で、あたったのは3.5でした。では2016年の予測はどうだったでしょうか。結果を振り返ってみます。 1. 大手企業でハッキング被害が起こる 本当にとんでもないことに、1月からハッキング事件のニュースが相次ぎました。名指しは良くないかもしれませんが、Yahoo!、米国司法省、Snapchat、Verizon、 LinkedIn、Oracle、Dropboxなどです。ただし、これらはほんの一部で、おそらく安全だった企業を挙げるほうが簡単かもしれません。 悔しいことに、複雑な攻撃はめっ
iOS風すりガラスだけじゃない！backdrop-filterのすごいCSS実装アイデア
iOSのすりガラスのような効果をWebでデザインで導入したい。そんなときに便利なbackdrop-filterプロパティを知っていますか？ ブラウザーの実装はまだイマイチですが、おもしろい使い方ができそうですよ。 W3CのFilter Effects Module Level 2で導入された、CSSのbackdrop-filterプロパティについて解説します。特に構文、ブラウザーの対応、応用方法を取り上げます。 デモを含め、記事中のすべての画像の出典はPixabay.comです。 Backdrop-filterは従来のfilterプロパティとは別物 CSSフィルターのことは、よく知っているでしょう。おさらいをするなら『Photoshopはもういらない？明度も彩度も超手軽に変えられるCSSフィルターがスゴい』がおすすめの記事です。 従来のfilterプロパティは指定した要素にぼかし（blur
2017年に学びたい！次世代CSSレイアウト「Grid Layout Module」の使い方
Flexboxを使ったCSSレイアウトが広まった2016年。2017年は一足早く、Grid Layout Moduleを使ったCSSレイアウトにも触れてみませんか？ この記事では、グリッドレイアウト（Grid Layout）モジュールを使ってWebページに要素を配置する、7つの方法を紹介します。 SitePointでは以前にも、『Flexboxよりも新しい！CSSレイアウトの最新仕様Grid Layout を先取りしよう』『An Introduction to the CSS Grid Layout Module』『CSSレイアウトの常識が変わる！Grid Layout Moduleの最新動向を追いかけろ』でグリッドレイアウトを取り上げています。 本記事ではCSSのグリッドを使って要素を配置する方法だけに的を絞ります。 グリッドレイアウトの貧弱なサポート状況への対策 以前の記事で述べたよう
まだ画像テキスト使ってるの？ アクセシビリティとSEO両立のベストプラクティス
かつて私たちは、画像テキストを表示するために「text-indent: -9999px;」なんてCSSを書いていました。でも、いまならもっといい方法があります。いまどきのベストな方法と、それが使えないときの解決方法を。 以前掲載された『いくつ覚えてる？いつか役に立つかもしれないCSS画像置換の手法と歴史』の中でBaljeet Rathiが紹介しているたくさんの画像置換テクニックは、どれを取っても見事に工夫されています。すべてのテクニックは、人と検索エンジンの両方に対するアクセシビリティを保ちつつ、テキストコンテンツをWeb上でいかに美しく芸術的に表現するか、という課題に焦点を当てていました。Webデザインの世界におけるこの目標を、今日手軽に使えるカスタムフォントやパワフルなCSSツールなしで達成するのはまさに偉業でした。 Rathiの記事にヒントを得て、次の課題を挙げてみました。 画像変換
OZY Media Curated
OZY Media was an innovative news and entertainment company focused on profiling “the new and the next” in politics, business, foreign and national affairs, technology, arts and culture – until it was forced to shut down after a New York Times story written by a journalist who, at the time the article was published, maintained a financial interest in OZY competitor BuzzFeed. This version of OZY.com
ネットワーク転送時間・速度計算（電卓）
ネットワークを利用したデータ転送（ファイル転送）、 ダウンロードに掛かる時間や転送速度を計算します。計算時の中間計算式も表示しますので計算方法も確認できます。 また、実際に転送に掛かった時間から転送速度や伝送効率（伝送損失）を求めることもできます。 回線の増強検討やバックアップ時間の試算などに是非ご利用ください。 ネットワーク以外のHDD、USB、SDなどの転送速度も計算できます
最新技術を学び続けるのは疲れる？ フロントエンド開発者なら変化を楽しもう
ものすごいスピードで変化し続けるフロントエンド開発の世界。変化をもっとポジティブに楽しむために、あなたも「実験」を始めてみては？ 学びに終わりはありません。特に、Web開発の世界では終着点なんてありません。Web業界は常にアップデートや改善を繰り返しているので、Webに関わっている人たちも同じことをしなくてはならないのです。新しい変化についていこうとすると疲れてしまいますが、その必要はありません。 この記事では、ちょっとした「実験」が新しいことを学ぶのに効果的な方法であること、JavaScriptの知識を楽しくアップデートし続ける方法を紹介しましょう。 実験を楽しくしよう 本業以外の仕事、サイドプロジェクトの経験はありますか？ もしサイドプロジェクトの経験があれば、最初はとても楽しかったのに、すぐにややこしくなって混乱してしまった経験もあると思います。なにかに行き詰まるというのはあまり楽し
ランディングページで平均4.2%の成約率を出すために行っている27の手順
おそらく、大半の企業はランディングページで望むだけの売上を得ることが出来ていないのではないだろうか。 もし望むだけの数字を達成できているなら素晴らしいことだ。しかし、大半の方は、どの会社に頼んでも数字は変わらないので、ほとんど諦めかけているかもしれない。 一方、弊社のランディングページは平均で４.２％のコンバージョン率が出すことができている。 また業界別では、賃貸業で１８.２７％、美容で１５.７２％、健康食品で１４.２１％、建築業で１３.６４％、整骨院で７.１３％など、業界平均を大きく上回る数字だ。 そこで本日は、バズ部がランディングページを制作する上で実際に行っている全ての手順をご紹介する。 これを読めば、高いコンバージョン率を記録している理由も全てご理解頂けるはずだ。また、このまま真似て頂ければ、自分自身で良いランディングページを作れるようになる方もいるだろう。 少しでも役に立ったなら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
沖縄B級ポータル - DEEokinawa（でぃーおきなわ）
Tuts+
