WebページやスマホアプリのUIデザイン・モックアップが簡単に！Adobe XDのプラグイン「Spectrum」が便利
WebページやスマホアプリのUIデザインで、一貫したコンポーネント・テーマ・カラー・タイポグラフィ・アイコンなどを作成・管理できるAdobe XDの無料プラグイン「Spectrum」を設計したAdobeのデザインシステム・デザインマネージャーの解説記事を紹介します。 Spectrum for Adobe XD: Adobe’s design language in its experience design tool by Jacob Frank 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Spectrumの機能と開発した経緯 Spectrumを使用した結果 Spectrumのインストール方法 Spectrumの今後の機能 ご意見をお聞かせください はじめに アドビのデザインシステムであるSpectrumは、5年前
無料＆超簡単にパスワード付きのURLを作成できるオープンソースなウェブサービス「Link Lock」レビュー
DropboxやGoogle Driveといったクラウドストレージにアップロードしたデータを共有する場合など、URLを誰かに伝えることは日常的な行いです。無料で公開されているオープンソースサービス「Link Lock」を使うと、簡単にURLにパスワードをかけることができます。 Link Lock - Password-protect links https://jstrieb.github.io/link-lock/create/ GitHub - jstrieb/link-lock: Distributed application to password-protect URLs using AES in the browser https://github.com/jstrieb/link-lock さっそくウェブサイトにアクセスすると、URLやパスワードを入力する画面が表示されます。
Webページの表示が早くなる！既存ページのクリティカル レンダリング パスを最適化するオンラインツール
スタイルシートを外部ファイルで管理されている人が多いと思います。しかし、最近では上部のコンテンツを表示するためのスタイルシートをインラインで記述し、残りは後にロードさせ、ページの表示を早くしているサイトが増えてきました。 Googleなどでも積極的に採用されているテクニックです。 既存ページのクリティカル レンダリング パスを改善するためのスタイルシートを簡単に生成できるオンラインツールを紹介します。 ※秒数は目安です クリティカル レンダリング パス(Critical Rendering Path)とは、ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になり、この時にブラウザがページの最初のペイントを実行するために必要とするシーケンスのことです。 クリティカル レンダリング パスについて詳しくは、下記を
サイトやアプリの画面遷移を分かりやすく見せる、ユーザーフローを作成する要素が揃ったプラグイン -UserFlows
Webサイトやスマホアプリの画面遷移を伝えるフローチャートやユーザーフローを3つのショートカットで作成できるSketchのプラグインを紹介します。 ラインやアロー、条件付きロジック、フローダイアグラムなどが簡単に作成できます。
Facebookイベントページで、ユーザーに選ばれるイベントになるための11のフロー | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ のっちです♩ いよいよ夏も本番！になってきましたね。先日新しくオープンした野尻湖オフィスの掃除に、たくさんのLIGメンバーがきてくれました！ 掃除の後は、カヌーをしたり花火を見たり、湖にただただプカプカ浮いてみたり・・・と、これでもか！！！と夏気分をめいっぱい満喫してきました。 みなさんもぜひ、気軽に遊びにきてくださいね♩ さて、私の運営している「きんぎょ女子」が先日第4回目のイベントを終えました！ 私がイベントの参加者を募集する際、集客ツールとしてFacebookのイベントページを活用することが非常に多いです。 そこで今回は、Facebookのイベントページを活用する際のコツをご紹介します。 Facebookイベントページのメリット・デメリット さまざまな集客ツールから、あえてFacebookを選択した理由としては、やはり参加側のユーザーにとっても参加までのハードルが低めな
こいつぁ便利ね…！他サイトの記事紹介リンクをかっこ良く作成してくれる「Embedly」
人様のブログや他サイトの記事を紹介するためにいろんな方法をとっておりましたが、@shintarowfresh さんの最近捗ったweb系のあれこれって記事で知ったEmbedlyというサービスがなかなか良かったので導入＆カスタマイズしてみました。 Embedly 外部サイトを紹介するのに便利なEmbedlyの使い方 まずはこちらのページへGO。 ブックマークレットをブックマークバーにぶち込みます。 これで準備は完了。あな簡単し。 あとは紹介したいページにアクセスして、先ほど登録したブックマークレットをクリックすると… いいじゃない！下部のソースコードを貼り付ければおしまいです。 できあがりは↓こんな感じ。 ホント買って良かったこのレンズ！Sonnar T* FE 55mm F1.8 ZA（SEL55F18Z）実写レビュー レスポンシブ対応ですし、使い方も非常に簡単。こいつぁ便利ですね！ 最近捗
Magic Mockups • Free real-life mockup generator
Follow and get notified when new environments are added: Do you like this project? Tell your friends.
指定したウェブサイトのスクリーンショットをサムネイルで自動生成する
ウェブサイトのサムネイルを生成したいときに、PHPを使って自動で取得し表示する方法です。こういったサービスは色々あるんですが、国内海外気づいたらサービスが終了していた、ということがあります。 wordpressのAPIを使うんですが、そうそうここは終了という可能性は低いでしょう。（と信じたい） wordpressの場合、変数urlにカスタムフィールドなどを充てれば指定したURLから自動で表示できて楽です。その場合は $url = post_custom('url'); とすればOKです。 非公式のAPIのため、いつ終わるかはわかりませんがwordpress自体が使用しているようなので当面は大丈夫なのでは？と思います。 phpが使える環境なら簡単に使える機能です。 【2014/01/09追記】 なかなかスクリーンショットが生成されないな、毎回自動生成しているのかな、と思っていたんですがどうや
URLだけでサイトのスクリーショット（サムネイル）を表示できるAPIまとめ | QWERTY.WORK
サイトのサムネイルに『Mozshot』を使っていましたが、使用者が多いせいか最近は画像が重たくてページの表示が最近遅いです。でも、こういったサービスは便利なので、他にないか探してみました。 wordpress.comのAPI エンコードしたURLを指定します。「w」パラメータで画像の幅を自由に指定できWordpressのプラグインではないので、Wordpressを使用していないサイトでも使えます。 https://s.wordpress.com/mshots/v1/https%3A%2F%2Fja.wordpress.com?w=250 【サンプル】wordpress.com のスクリーンショットを幅250pxで取得してみました。 WordPressのプラグインは以下があり、ショートコードでサムネイル表示できるので便利です。 Browser Shot BM Shots HeartRails
jQueryで目次を自動生成する「tocプラグイン」
jQueryで目次を自動生成する「tocプラグイン」を公開します。 １．概要 プラグインを利用することでページ内の見出し要素を抽出し、指定したid属性値の要素に目次を表示します。 たとえば次のようなコンテンツがあるとします。 <h3>タイトル1</h3> <div>本文</div> <h4>タイトル1-1</h4> <div>本文</div> <h4>タイトル1-2</h4> <div>本文</div> <h5>タイトル1-2-1</h5> <div>本文</div> <h3>タイトル2</h3> <div>本文</div> <h4>タイトル2-1</h4> <div>本文</div> <h4>タイトル2-2</h4> <div>本文</div> <h3>タイトル3</h3> <div>本文</div> <h4>タイトル3-1</h4> <div>本文</div> <h4>タイトル3-2<
「Google+ページ」の作り方、GIGAZINE公式Google+ページ開設の場合はこんな感じ
検索の王者「Google」にとって最大級の誤算がSNS「Facebook」の出現であり、なぜかというとFacebookの中にある情報をGoogleは検索することができないため。せっかく有用な情報が多くあってもFacebookの中にあると探し出すことができず、しかもほとんどの人間は遠くのどこかで起きている重要な社会事件や知識よりも、自分の身近に起きた出来事の方を重要視するという事実にGoogleは打ちのめされ、しかもFacebookは詳細な個人情報を保有しているため広告などのマッチング率も異常に高く、検索と広告の合わせ技で生きているGoogleにとってその危機感は尋常ではない状態に。そして「このままでは全部Facebookに持って行かれてしまう！」と思い込んで作ったSNSが2011年6月末開始の「Google+」、Google創業者のひとりであるセルゲイ・ブリンが猛烈な勢いで開発を主導し、A
使いやすいスタイルガイドを作るための5つのポイント
by Dave Crosby ウェブサイトのデザインを決める時にページ上のコンポーネントやモジュールをリスト化したスタイルガイドを作っておくと、開発者や他のデザイナーと情報が共有でき便利です。では、どのようにしてスタイルガイドを使うとうまく運用できるのか？ということで、ZURB Universityが5つのポイントにまとめています。 ZURB University | 3 Minute Lessons http://zurb.com/university/library/31 ◆1：サイトを構築するのに十分な情報を含める by Noëmie Haffner 誰が担当してもゼロからウェブページを作れるように、コンポーネントを十分に含ませておき、ガイドラインやコーディングしたUIのパターンなどを書いておくことが大切。全てを説明するのは難しいので、プレビルドのコンポーネントを用いて、HTMLやC
ページ内の目次を自動生成するjQueryプラグイン・jQuery Jump To
ページ内の目次を自動生成する、というスクリプトのご紹介です。見出しを検出してページ内のナビゲーションを作成出来ます。冗長なページにはあると良さそうですね。 ページ内の見出しを使ってナビゲーションを作成します。現在閲覧中の見出しにもスタイルを当てられますのでユーザーに分かりやすいナビゲーションを作成出来そうですね。 長いページにはページ内ナビゲーションがあると便利。ドキュメントや規約など冗長化しやすいコンテンツと相性良さそうです。 $(document).ready( function() { $(".page_container").jumpto({ firstLevel: "> h2", secondLevel: "> h3" }); });リンクとして取り出す要素は上記のように指定します。ネストも可能ですが2段階層までの対応のようです。 シンプルなので手軽に使えそうですね。詳細は以下よ
1ページだけのサイトを簡単に作れる「Populr」
ウェブサイトやブログを作るのはめんどくさい、Facebookは登録が手間、だけど自分だけのページが欲しい……。そんなわがままな要求に応えてくれるのが、1ページだけのサイトを簡単に作れるサービス「Populr」です。 Populr.me - One page, get results. https://populr.me/ Populrは、セールスを顧客にアピールしたり、マーケティング戦略として商品を紹介したり、友達とのコミュニケーションツールにしたりとさまざまな使い方が想定されています。本当に簡単にサイトが作れるのか試しに作ってみました。 まずはトップ画面にある「GET STARTED FOR FREE」をクリック。 なお、対応ブラウザーは、Google ChromeとSafariの2種類です。Firefoxなど他のブラウザで利用しようとすると下のような注意書きが出て使用不可なので注意。
無料＆一瞬でDropbox上にウェブサイトを作成できるサービス「Small Victories」
自分のウェブサイトを作って公開するにはサーバーが必要ですが、自分で構築するのはかなり面倒ですし、レンタルすればお金がかかります。しかし、Dropboxのアカウントを持っていればクリックからたった数秒でDropbox上にウェブサイトを作成できて公開できるのが「Small Victories」です。実際にどれくらい簡単に作れるのか試してみました。 Small Victories http://smallvictori.es/ まずはSmall Victoriesのサイト中段にある「Connect to your Dropbox!」をクリック すると連携認証画面になるので「許可」をクリック こんなページに飛ばされます。 自分のDropboxページに戻ってみると「アプリ」というフォルダが作成されているのでこれをクリック 「smallvictori.es」というフォルダをクリック すると中には画像フ
構造化データを活用しよう！ - 2 つのアップデート
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
Google が 「モバイルのおすすめ」 機能を提供開始
Google は、自分のモバイルサイトに訪れたユーザーに対して、Google+ ページと連動してその他のおすすめページを紹介する 「モバイルおすすめ」 機能を提供開始しました。 Google+ Developers Blog で、モバイル向けの 「Content recommendations for mobile websites」 機能、日本語では 「モバイルのおすすめ」 機能が提供開始されたとの記事が上がっていましたので紹介。 「モバイルのおすすめ」 機能は、自分のモバイルサイトに訪れたユーザーに対して、そのサイトの Google+ ページでの +1 に応じてサイト内の他のページをおすすめする機能で、仕組み的には Facebook の 「Recommendations Bar」 や、「SimpleReach」 などと同じ、ページ下部に、「その他のおすすめ記事」 みたいなレコメンドを出
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webページの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプト -pagemap
任意のWebサイトからデータを抽出し、リンクカード化してくれるAPI・「Microlink」 | かちびと.net
これはスゴイぞ！Bootstrapのページ作成が積み木感覚で簡単にできてしまうジェネレーター -lollytin