タスク管理ツール「Trello」の特徴的なレイアウトを最新のCSSテクニックを使って実装する方法を解説します。 Trelloボード画面(例はこちら)の基本的なレイアウトの実装方法を紹介します。レスポンシブでCSSのみを使うソリューションでレイアウト構造の特徴を解説します。 最終結果のCodePenデモです。 Grid LayoutとFlexboxのほかに、calcとviewportユニットを使いま…

Loading...

WebSocketを使ってリアルタイムかつ両方向の通信機能をWebサイトやモバイルアプリに組み込むサービス「Pusher」。Laravelと組み合わせて、Webアプリ内にリアルタイムな通知機能を追加する方法を解説します。Eメール、SMS、Slackなどにも通知できます。 ユーザーはどのWebサイトでも同じ機能を提供できると考えています。SNSだけでなくどんなWebサイトにも「通知を受ける」のドロッ…

Loading...

LESSONS

低予算でも高い利益を生み出すために、B2Bサービス向けのサイトをどう作るべきか? ASCIIのベンチャー、スタートアップ応援チームによるセミナー企画『ASCII STARTUP ACADEMY』では、「Startup Proffesional コンバージョンさせるB2Bサイト作りの基礎とトレンド」を11月15日(水)に開催します。 本イベントは、B2Bビジネスでのコンバージョン・顧客獲得を主眼に、…

Loading...

Googleが提唱する「プログレッシブWebアプリ(PWA)」。そのコンセプトを理解し、実装に反映するには「アプリ感覚」の体験を実現することが必要です。ポイントを紹介します(PWAの入門記事も併せてどうぞ)。 グーグルのZach Cochが「Webとアプリの境界線はこれまでになくあいまいになっています」と述べたように、Webはかつてなく改良され、「高速なリッチアプリ感覚」の驚くべき体験を創出できる…

Loading...

検索連動型広告「D2C Performance Ads」が、2017年11月末で提供終了(広告配信終了)します。そこで、提供者であるD2Cの担当者が提供者目線での運用型広告を解説します。 多くのマーケターの皆さんが、自社サービスへの集客や購入・成約を目的としてGoogle Adwordsをはじめ検索連動広告サービスを利用し、日々運用をされていると思いますが、その半面、検索広告サービス自体を運営し広…

Loading...

開発者ならお気に入りのツールやワークフローがあると思いますが、他の開発者のツールややり方も気になりますよね? そこで、11人の著名なPHP開発者に、よく使うツールやワークフローを伺いました。 開発者はプロジェクトの最終成果物を完成させるために自分なりのプロセスを編み出しています。そのプロセスには、試行錯誤の末にたどり着いたツールが含まれます。「プロセス」と「使うツール」が決まると、ワークフローが完…

Loading...

Webデザイナーにとってもっとも身近なプログラミング言語といえばJavaScriptですよね。ところがいざ勉強を始めたものの挫折してしまった…という人のために、典型的な失敗例と学習のコツを教えます。 JavaScriptの学習をしても挫折する人の多くは、「JavaScriptは分かりにくい」「自分はWeb開発に向いていない」と言います。悲観的になってあきらないでください。アプローチの仕方を変えるこ…

Loading...

話題の「ヘッダービディング」ソリューションの種類と、強み、弱みをまとめました。 最近の日本のネットメディア界隈では「ヘッダービディング」の話題がホットです。 メディア関係者なら押さえておきたい、ヘッダービディングを1分で解説 https://www.webprofessional.jp/whats_headerbidding/ 引用元:fluct magazine 「ヘッダービディング」によって、…

Loading...

納期を守れない開発者がいたとしたら、プロジェクトの進め方を改善することで解決できるかもしれません。生産性を向上させるアプリを紹介します。 工程を立てて、毎日の作業内容と作業量を決めたのに、終わってみれば未完成のリストが残っただけ。あの時間はどこにいったのかと途方に暮れる。よくある話です。 この記事では、仕事の生産性を向上させるツールを「タイムマネジメント」「チェックリスト」「スケジューラー」「プロ…

Loading...

10月17日に配信が始まった「Windows 10 Fall Creators Update」に導入された、マイクロソフトの新しいデザイン言語「Fluent Design System(フルーエントデザインシステム)」。コンセプトと実装へ反映する方法を解説します。 独自のデザイン言語やGoogleのMaterial Design(マテリアルデザイン)など既存の言語を実装して、統一のとれた堅牢なユー…

Loading...