タグ WPJ
人気順 10 users 50 users 100 users 500 users 1000 usersたった数行のCSSでパララックス風表現ができる「position: sticky」の使い方 - WPJ
短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できる position: sticky が便利で面白い使い方ができそうなので実験してみました。 仕様がまだ草案(Working Draft)の段階 で、将来、細かい部分に変更がないとは言い切れません... 続きを読む
意外と知らない、失敗しないインタビューの「質問のコツ」と「事前準備」 - WPJ
インタビューの仕方を知っていますか? 準備不足でインタビューに臨んでしまうと、うまく会話が進まなかったり、内容の薄い記事になってしまったりすることがあります。事前に準備するポイントと、質問のコツを紹介します。 近年、企業は顧客の課題の解決方法として商品紹介のみならず、さまざまな情報をコンテンツとして発信しています。数多くあるコンテンツのひとつに、インタビュー記事があります。 今回は、インタビューを... 続きを読む
CSS GridとFlexboxで驚くほど簡単にレスポンシブレイアウトを実装する方法 - WPJ
レスポンシブWebデザインの実装に欠かせないメディアクエリを使わずに、CSS GridとFlexboxでレスポンシブなレイアウトを実装する方法を紹介します。 レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、 CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能 です。メディアクエリが全くいらなくなるということはないと思いますが、CSS Gr... 続きを読む
CSSフレームワーク、モダンJavaScript、AmazonのUX…2017年のアクセス1位は? - WPJ
デザイナー、エンジニア、マーケターの「掛け算」のスキルアップを応援するパスファインディング・メディア「WPJ」が2017年に公開した記事は、500本あまり。HTMLやJavaScriptのチュートリアルから、UXデザイン、ネット広告のトレンド解説記事まで、読者によく読まれた記事ベスト10を紹介します。 【1位】もう実機は不要!? Chromeのモバイルエミュレーターがとんでもなく進化していた Ch... 続きを読む
Web屋の私が勘違いしていた、世界のネット通信環境の驚くべき状況 - WPJ
アプリやWebサイトをより良く、より速く、よりアクセシブルにする手助けが私の仕事です。 Calibre でWebを構築したり、メンテしたりする際にぶつかる課題について、知見が集まりました。 この1年で本当に驚いたことは、一般のユーザーがどうインターネットにアクセスしているかです。Web業界に従事しているのに、ほとんど理解していませんでした。自分たちがユーザーにコンテンツを配信する方法がいかに時代遅... 続きを読む
ノンプログラマーがJavaScriptを初めて学ぶときにありがちな9つの失敗 - WPJ
Webデザイナーにとってもっとも身近なプログラミング言語といえばJavaScriptですよね。ところがいざ勉強を始めたものの挫折してしまった…という人のために、典型的な失敗例と学習のコツを教えます。 JavaScriptの学習をしても挫折する人の多くは、「JavaScriptは分かりにくい」「自分はWeb開発に向いていない」と言います。悲観的になってあきらないでください。アプローチの仕方を変えるこ... 続きを読む
ついにWindowsへ導入が始まった「Fluent Design System」5つの基本要素 - WPJ
10月17日に配信が始まった「Windows 10 Fall Creators Update」に導入された、マイクロソフトの新しいデザイン言語「Fluent Design System(フルーエントデザインシステム)」。コンセプトと実装へ反映する方法を解説します。 独自のデザイン言語やGoogleの Material Design(マテリアルデザイン) など既存の言語を実装して、統一のとれた堅牢な... 続きを読む
フォームをぐっと使いやすくする!ウィザード型jQueryプラグイン6選【2017年版】 - WPJ
フォームをぐっと使いやすくする!ウィザード型jQueryプラグイン6選【2017年版】 2017/10/11 James Hibbard Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Trans... 続きを読む
高度で複雑なWebアニメーションが自在に作れる!GreenSockプラグイン5つ - WPJ
ReactとPHPでリアルタイムなシミュレーションゲームを作ってみた - WPJ
ReactとPHPでリアルタイムなシミュレーションゲームを作ってみた 2017/09/15 Christopher Pitt Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation... 続きを読む
誰もがみんな「UXデザイナー」を名乗る必要なんてない - WPJ
一方で、こうした傾向はベテランデザイナーにとってストレス解消になるかもしれません。実際、 完全に特化したTumblr があるほどです。 しかし、残念なことに、初学者にとってはストレスな業界だと感じ、近寄りにくくなる危険性があります。新しいデザイナーがこれほど業界に入りにくくなったことは、過去に例を見ないほどです(私はポジティブに捉えていますが)。 TL;DR UIは、ユーザーインターフェイス を意... 続きを読む
そろそろ対応しなきゃ!WordPressサイトのためのAMPの基本と実装方法 - WPJ
そろそろ対応しなきゃ!WordPressサイトのためのAMPの基本と実装方法 2017/08/17 Jason Daszkewicz Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Transla... 続きを読む
優れたUXデザイナーになるための身に付けたい5つの行動 - WPJ
Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2017, KADOKAWA CorporationJapanese syndication rig... 続きを読む
いまさら聞けないCSSレイアウトの定番手法 Flexbox再入門 - WPJ
いまさら聞けないCSSレイアウトの定番手法 Flexbox再入門 2017/08/04 Christian Krammer Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation ... 続きを読む
きれいで読みやすいJavaScriptを書く デコレーターの基本を先取り - WPJ
Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2017, KADOKAWA CorporationJapanese syndication rig... 続きを読む
あなたが知らないJavaScriptの便利すぎるショートハンド19選 - WPJ
日頃書いているJavaScriptをもっと短く書く方法を知っていますか? 目からうろこ、すぐに使えるJavaScriptのショードハンドを紹介します。 JavaScriptを使うすべての開発者に向けて、私が長年かけて身につけたJavaScriptのショートハンド(短縮記法)を資料にしました。コードの違いが分かるように通常の記述方法も併記しました。 1.三項演算子 if-else文を1行に収めた短縮... 続きを読む
「フルスタック開発者」を名乗るなら身につけたい技術と知識【2017年版】 - WPJ
「フルスタック開発者」を名乗るなら身につけたい技術と知識【2017年版】 2017/07/12 Bruno Skvorc Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation c... 続きを読む
10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう - WPJ
10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう 2017/06/16 James Kolce Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation c... 続きを読む
センスがないノンデザイナーの味方!海外発の人気デザインツール「Canva」が上陸 - WPJ
Facebookに投稿する画像やちょっとしたバナーをセンス良くサクッと作りたい。そんなときに便利なデザインツール「Canva(キャンバ)」がオーストリラリアから日本にやってきました。 Canvaは、Webや印刷に使えるグラフィックをブラウザーまたはiOSアプリ上でデザインできるサービス。「バナー」「チラシ」「ポストカード」「名刺」「プレゼン資料」など、あらかじめ用意された膨大なテンプレートの中から... 続きを読む
さらばjQuery!アニメーションをサクサク処理できるVelocity.jsの使い方 - WPJ
「jQueryのアニメーションが遅い」「CSSアニメーションは使いにくい」。そこでアニメーション処理の定番ライブラリー「Velocity.js」の出番です。基本的な使い方を一通り紹介しましょう。「jQueryのアニメーションが遅い」「CSSアニメーションは使いにくい」。そこでアニメーション処理の定番ライブラリー「Velocity.js」の出番です。基本的な使い方を一通り紹介しましょう。 本記事では... 続きを読む
JavaScriptをもう一度学びたい人へ 演算子、条件文、関数の基礎をおさらい - WPJ
この春、 JavaScript を始めた新人さんも。いつもコピペで済ませているデザイナーさんも。JavaScriptの演算子、条件文、関数の基礎をさらりとおさらい。JavaScriptをもう一度学びたい人へ 演算子、条件文、関数の基礎をおさらい 2017/05/19 Tania Rascia Articles in this issue reproduced from SitePoint Copy... 続きを読む
JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい - WPJ
JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい 2017/05/15 Camilo Reyes Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Transla... 続きを読む
どれがいい? 全部無料でブラウザーだけで使えるSVG編集ツール6選 - WPJ
いまやモバイルアプリのデザインでもWebデザインでも、欠かせなくなったSVG画像。ブラウザー上でサクッと編集できる、SVGエディターを紹介します。#SVGどれがいい? 全部無料でブラウザーだけで使えるSVG編集ツール6選 2017/05/01 Ada Ivanoff Articles in this issue reproduced from SitePoint Copyright © 2017,... 続きを読む
もうjQueryには頼らない!素のJavaScriptでDOMを操作するための基礎知識 - WPJ
古いブラウザーのサポートが必要ないなら、もうjQueryを使わなくてもいいかもしれません。ネイティブなDOM APIの使い方をサンプルとともに解説します。もうjQueryには頼らない!素のJavaScriptでDOMを操作するための基礎知識 2017/04/27 Sebastian Seitz Articles in this issue reproduced from SitePoint Cop... 続きを読む
最新CSSレイアウト仕様「Grid Layout」で要素を並び替える方法 - WPJ
Firefox 52、Chrome 57で標準サポートされた、CSS Grid Layout Module。便利だけどちょっと難しい、CSSグリッドを使ったレイアウトの操作方法をサンプルコードをもとに解説します。Firefox 52、Chrome 57でついに正式サポートされた、CSS Grid Layout Module(CSSグリッドレイアウトモジュール)。便利だけどちょっと難しい、CSSグリ... 続きを読む