CommunitySee All
Highlights info row image
11,689 people like this
Highlights info row image
11,494 people follow this
Photos
Videos
WPJセミナー担当の皆元です。今週金曜日に開催する「コンセプトダイアグラム速習講座」では、実際に参加者のみなさんにコンセプトダイアグラムを描いてもらう予定です。ということで、私もA4サイズのホワイトボードで練習してみました! 若干キャンセルが出て、残り4席となりました。清水誠さんに直接指導してもらう、ワークショップ中心の実践的な内容となりそうです。UXやCX、ビジュアル化に興味のある方、ぜひご参加ください。 http://ascii.jp/elem/000/001/266/1266309/ ※本セミナーはプレミアムメンバー限定(月額972円)ですが、これから入会→申し込みでも大丈夫です(行き違いで満席の場合はごめんなさい)。
11
Posts

今週公開した記事の中から、この週末に読んでおきたい注目記事をまとめて紹介。今週は、インスピレーションの宝庫「Dribbble」のデザイナー12人、「スクロール疲れ」を防ぐフォーカスポイントを操る方法、主要SNSのフォントとカラー総まとめなど、話題の記事を中心に8本をセレクト。平日は忙しくてチェックできなかった人も、休日にゆっくりまとめ読みしてみては? 【今週の一番人気】インスピレーションの宝庫「Dribbble」でいまフォローしたいデザイナー12人 デザイナーならおなじみのSNS「Dribbble」でいま注目のデザイナー12名を厳選して紹介。 【お役立ちネタ】ユーザーの「スクロール疲れ」を防ぐ! フォーカスポイントを操るコツ ページを読み進めるほどにユーザーは疲れていきます。ユーザーの集中力を回復するとっておきの方法を教えます。 【とりまブクマ】【保存版】Facebook、Twitter、インスタ…主要SNSのフォント、カラー総まとめ Facebook、Twitterなどソーシャルネットワーキングサービスで利用されているフォントとキーカラーをまと...めました。 【デザイナー必読】すぐに取り入れる!ちょっとした配色の違いでWebサイトを使いやすくする方法 使い勝手に関わる、Webサイトの色使い。なんとなく適当に決めていませんか? アクセシビリティにも考慮した色選びのコツを解説します。 【マーケター必読】メディア関係者なら押さえておきたい、ヘッダービディングを1分で解説 単価の高い広告を優先的に配信するヘッダービディング。アドテク関係者以外には聞きなれない仕組みの概要をおさえましょう。 【知っトクと重宝】Jekyllで購入ボタンなどの動的なウィジェットを超簡単に作る方法 静的サイトジェネレーター「Jekyll」を使って、ブログやサイトで使い回せる動的なウィジェットを簡単に作る方法を紹介します。 【Web制作ヒント】CSSトリックを駆使してJS不要のクロスワードパズルを作ってみた 進化するCSSの機能を駆使して、CSSだけでクロスワードパズルを作りました。JavaScriptは一切使っていません! 【エンジニア必読】SeleniumによるNodeアプリの機能テストとデバッグのコツ Seleniumを使ったNodeアプリの機能テストの手順を解説しながら、テスト失敗時のデバッグを効率よく進めるヒントも紹介します。

See More
今週公開した記事の中から、この週末に読んでおきたい注目記事をまとめて紹介。今週は、インスピレーションの宝庫「Dribbble」のデザイナー12人、「スクロール疲れ」を防ぐフォーカスポイントを操る方法、主要SNSのフォントとカラー総まとめなど、話題の記事を中心に8本をセレクト。平日は忙しくてチェックできなかった人も、休日にゆっくりまとめ読みしてみては? 【今週の一番人気】インスピレーションの宝庫「D…
webprofessional.jp

Seleniumを使ったNodeアプリの機能テストの手順を解説しながら、テスト失敗時のデバッグを効率よく進めるヒントも紹介します。

https://www.webprofessional.jp/testing-node-applications/

Seleniumを使ったNodeアプリの機能テストの手順を解説しながら、テスト失敗時のデバッグを効率よく進めるヒントも紹介します。 Nodeアプリケーションの機能テスト Web開発プロジェクトで機能のテストをするには、起こり得るユーザーの操作リストを基にブラウザーでDOMの遷移をチェックします。仮にコンテンツマネジメントシステム(CMS)を作っているとして、画像ライブラリーのアップロード機能をテス…
webprofessional.jp
Posts

進化するCSSの機能を駆使して、CSSだけでクロスワードパズルを作りました。JavaScriptは一切使っていません!

https://www.webprofessional.jp/how-built-pure-css-crosswor…/

進化するCSSの機能を駆使して、CSSだけでクロスワードパズルを作りました。JavaScriptは一切使っていません! JavaScriptを使わずにCSSグリッドで動くCSSオンリーのクロスワードパズルを作成したところ、CodePenで話題になりました。執筆時点でハートマークが350、ページビューは24,000を超えました。 チュートリアルCSS Grid Gardenに触発され、グリッドレイア…
webprofessional.jp

使い勝手に関わる、Webサイトの色使い。なんとなく適当に決めていませんか? アクセシビリティも考慮した色選びのコツを解説します。

https://www.webprofessional.jp/how-to-boost-usability-with…/

使い勝手に関わる、Webサイトの色使い。なんとなく適当に決めていませんか? アクセシビリティにも考慮した色選びのコツを解説します。 「色」は生活に欠かません。色で物の違いを判別し、信号を把握し、ツールを正しく使っています。 さらに、色は人間の認知や気分にも多大な影響を与えます。色の感じ方の違いや、気分、感情に与える影響をまとめた短い研究論文にこんな実験結果が掲載されています。黒と緑の文字で「この箱…
webprofessional.jp

ページを読み進めるほどにユーザーは疲れていきます。ユーザーの集中力を回復するとっておきの方法を教えます。

https://www.webprofessional.jp/the-ux-of-zombie-scrollers-…/

ページを読み進めるほどにユーザーは疲れていきます。ユーザーの集中力を回復するとっておきの方法を教えます。 Webに関わっている人なら、ユーザーがコンテンツを一字一句読んでいないと知っているでしょう。スーパーマーケットの売り場に並ぶ食品のラベルを次々にながめるのと同じで、ユーザーはWebサイトのコンテンツを無意識に読み流しているのです。 なぜ読み流すのか なぜ読み流すのか。理由は簡単で「楽だから」で…
webprofessional.jp

Facebook、Twitterなどソーシャルネットワーキングサービスで利用されているフォントとキーカラーをまとめました。

https://www.webprofessional.jp/fonts-colors-used-facebook-…/

Facebook、Twitterなどソーシャルネットワーキングサービスで利用されているフォントとキーカラーをまとめました。 ソーシャルネットワークで利用されているブランドアセットを揃えておくと、デザインに正しく取り入れることができて便利です。FacebookやTwitter、Google+などの人気のソーシャルネットワークに使用されているフォントや色を押さえることで、ソーシャルログインボタンやアイ…
webprofessional.jp

メディアの収益改善に効く? 単価の高い広告を優先的に配信するヘッダービディングの概要をおさえましょう。

https://www.webprofessional.jp/whats_headerbidding/

静的サイトジェネレーター「Jekyll」を使って、ブログやサイトで使い回せる動的なウィジェットを簡単に作る方法を紹介します。

https://www.webprofessional.jp/quick-tip-how-to-build-cust…/

静的サイトジェネレーター「Jekyll」を使って、ブログやサイトで使い回せる動的なウィジェットを簡単に作る方法を紹介します。 静的なサイトを生成するツール「Jekyll」は、軽量ですがマニアックなツールだとWebデザイン界隈で認識されています。しかし、その印象はJekyllの一部でしかありません。できることが多く、技術者ではないユーザーやクライアントが簡単なサイトを作れる強力なツールです。 クライ…
webprofessional.jp

デザイナーならおなじみのSNS「Dribbble」でいま注目のデザイナー12名を厳選して紹介。

https://www.webprofessional.jp/12-best-dribbble-designers-…/

デザイナーならおなじみのSNS「Dribbble」でいま注目のデザイナー12名を厳選して紹介。 Webデザイナー、モバイルアプリデザイナー、グラフィックデザイナーを問わず、デザイナーならDribbbleはもうご存知でしょう。クリエイティブなアーティストが集まるソーシャルネットワークで、湧き出すインスピレーションの源泉です。さらに、優秀なDribbbleデザイナーが無料でデザインリソースを提供してい…
webprofessional.jp

今週は、海外の開発者1600人に聞いたCSS開発のいま、高校生のスマホ事情、フルスタックJavaScript開発のコツなど公開。平日は忙しくてチェックできなかった人も、休日にゆっくりまとめ読みしてみては?

https://www.webprofessional.jp/weekend-summary-170721/

今週公開した記事の中から、この週末に読んでおきたい注目記事をまとめて紹介。今週は、衝撃的なタイトルがソーシャルで話題になったBootstrapはすでに下火に——海外の開発者1600人に聞いたCSS開発のいま、高校生はスマホで何をしているのか調査、フルスタックJavaScript開発のコツなど、話題の記事を中心に8本をセレクト。平日は忙しくてチェックできなかった人も、休日にゆっくりまとめ読みしてみて…
webprofessional.jp

開発者なら誰しもJavaScriptをはじめとするコードのメンテナンスが面倒だと感じています。日々変更される標準や構文、サードパーティのパッケージ変更に付いていくのも大変です。

https://www.webprofessional.jp/getting-started-with-codemo…/

開発者なら誰しもJavaScriptをはじめとするコードのメンテナンスが面倒だと感じています。日々変更される標準や構文、サードパーティのパッケージ変更に付いていくのも大変です。 近年、JavaScriptを取り巻く状況は一変しています。JavaScript言語のコアは進化し続けて、基本中の基本である変数宣言の方法さえ変更されているのです。ES6では、letやconst、アロー関数などの変更がコアに…
webprofessional.jp

ストレスのないUXを実現するためには、いつもデザインしている「目に見えるUI」から一度離れて考えてみるといいかもしれません。

https://www.webprofessional.jp/invisible-ui-boost-ux-behin…/

ストレスのないUXを実現するためには、いつもデザインしている「目に見えるUI」から一度離れて考えてみるといいかもしれません。 「見えないUI」は、2017年に入ってから注目を集めているデザイントレンドで、UIをパーソナライズするのと並んで重要とみなされています。ビジュアルトレンドはすぐに廃れてしまいますが、見えないUIは根強く残るコンセプトです。 「見えないのにユーザーとどうやって対話するのですか…
webprofessional.jp

SPAなどモダンな Web開発に欠かせないモジュールバンドラー。高速でシンプル、Webpackに代わる次世代ツールとして注目される「FuseBox」の使い方を解説します。

https://www.webprofessional.jp/fusebox-faster-webpack-alte…/

SPAなどモダンな Web開発に欠かせないモジュールバンドラー。高速でシンプル、webpackに代わる次世代ツールとして注目の「FuseBox」の使い方を解説します。 急速に発展しているフロントエンドの環境は、JavaScriptのモジュールシステムの理解が必要不可欠です。モジュールを利用してコードを組織化することで、メンテナンス性と再利用性が向上します。残念ながら、ES modulesのブラウザ…
webprofessional.jp

WordPressでログイン時に表示されるツールバー。ちょっとしたプラグインを自作して、自分好みにカスタマイズしてみましょう。

https://www.webprofessional.jp/customize-wordpress-toolbar/

WordPressでログイン時に表示されるツールバー。ちょっとしたプラグインを自作して、自分好みにカスタマイズしてみましょう。 WordPress 3.3で導入されたダークグレーのツールバーにはメリットとデメリットがあります(このツールバーはWordPress 3.1では管理バー(Admin Bar)と呼ばれ、この名前には多くの人々、APIの作者までが閉口しました)。 管理画面やWebサイトの表示…
webprofessional.jp

Webサイトがマーケティングの一部になったいま、Webサイトだけを解析してもビジネスには貢献できません。データ中心のマーケティングについて真剣に考える必要があります。

https://www.webprofessional.jp/your-next-marketing-strateg…/

Webサイトがマーケティングの一部になったいま、Webサイトだけを解析してもビジネスには貢献できません。データ中心のマーケティングについて真剣に考える必要があります。 頭をフル回転して答えてください。あなたはマーケティング戦略の成果をどのように測定しますか? この質問に答えるのに2秒以上かかるなら、そのマーケティング戦略は計測できないメトリクスに基づいている可能性が高いです。 簡単なデータを分析し…
webprofessional.jp

WPJが提携するWeb開発者向けメディア「SitePoint」ではCSS開発者を対象にした大規模なアンケート調査を実施しました。その結果から、いま何を学ぶべきかが見えてきました。

https://www.webprofessional.jp/results-ultimate-css-survey…/

WPJが提携するWeb開発者向けメディア「SitePoint」ではCSS開発者を対象にした大規模なアンケート調査を実施しました。その結果から、いま何を学ぶべきかが見えてきました。 CSS開発の現場で実践されている習慣、CSSに関する知識の量、理解度などの情報を集める目的で実施した「究極のCSS調査」には、6週間で1600名以上からの回答が寄せられました。このほど集計が完了したので、結果を発表します…
webprofessional.jp