Chromeでテーブルの列を選択できる拡張ColumnCopyが激しく便利 - niwanome
メインのブラウザとしてChromeを利用しているのですが、Firefoxに比べて困るのがテーブルタグの選択です。 テーブルで構築されているWebページのリストをコピーしたいと思った時にFirefoxでは、Ctrキーを押しながらテーブルのセルを選択する事で、セル単位で選択してコピーなどができます。これを利用してテーブルの列をコピーしてExcelに貼り付けるというような便利な事が可能になります。 Chromeでこれを可能にしてくれる機能拡張がColumnCopyです。 直球の名前通り、Webページ上のTableタグの列だけを選択するという機能に特化した機能拡張です。 操作方法シンプル。コピーしたい列で「altキーを押しながらクリック」だけです。するとふわっと浮き上がるようなアニメーションがでてクリップボードに内容がコピーされます。 あとはそれをExcelなりなんなりに貼り付けることができます。
ケーススタディ：若い女性向けのECショップにおけるデザイン
ECショップをデザインするとき、デザイナーはどういったことを気にしてデザインをするべきでしょうか。シンプルでおしゃれなビジュアル？ それともお得情報を前面に出しますか？ 実際の店舗でもさまざまなショップが存在するように、扱う商品やターゲット属性によって、当然ながらECショップのデザインアプローチも変わってきます。 今回はHamee株式会社で運営しているECショップにおける事例を、デザイナーの平山さんにお聞きしました。 平山 智也 氏 Hamee株式会社 デザイン部 UI/UXデザイナー 茨城県神栖市出身。大学では情報学部でデザインコースを選考し、WEBデザインやUI/UXを学ぶ。 学生時代のアルバイトで不動産広告のデザインやweb制作会社のインターン経験を経て、新卒でHameeに入社。現在はEC店舗のUI/UX改善、販促企画などのコンテンツデザインに携わっている。 同じ商品でもターゲットに
やはり、お前らのJavaScriptでのリダイレクト実装は間違っている
一見簡単に見えるJavaScriptでのリダイレクト(URL転送)ですが、よく知られた方法にはある落とし穴があり、Googleアナリティクスで正常な解析が行えなくなります。どんな落とし穴があるかと、その回避策について解説します。 なお、こちらの記事は、 SEM Technology - Googleアナリティクスに悪影響を与えずにJavaScriptでリダイレクトする方法 と同じ内容となっています。 はじめに モバイルサイトとPCサイト間のリダイレクトであったり、URL変更に伴うリダイレクトにおいて, .htaccessなどを用いたサーバー側でのリダイレクトが技術上できず、JavaScriptを利用してリダイレクトしているケースをたまに見かけます。 こうしたサイトでは、見た目上は問題なく動作しているものの、実はGoogleアナリティクスなどを用いてアクセス解析を行うと致命的な問題点がみつか
株式会社デモ - 御社の「最高」を目指して。
私たちはshopifyパートナーとして、オンラインショップの構築を得意としています！ shopifyなら安く、そして簡単にオンラインショップを開設することができます。
面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方
レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で！ 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも！アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ
モバイルオンリー、グリッドの使い方の変化、ボタンに使われるアニメーションなど、Web制作者が備えておきたい現状とトレンドを解説
モバイルファーストからモバイルオンリーへ、レイアウトのグリッドやローディング時のアニメーション、ボタンに使われるアニメーションも少しずつ変化し、人工知能によるデザインなど、Web業界は着実に進化しています。 Webデザイン、そしてグラフィックデザインで今起きている現状と知っておきたいトレンドを紹介します。 2016年は「モバイルファースト」の年でした。そして、2017年はついに「モバイルオンリー」の声が聞こえてきます。 行き過ぎだと思いますか？ 実際のところ、2015年には上位サイトへのすべてのトラフィックが、モバイルで56％を占めていました（2015年 トラフィック レポート）。この割合は上昇し、2016年のデータはまだありませんが、専門家はモバイルのトラフィックが全体の60％を大幅に上回っていると考えています（モバイルのトラフィックは増加し続ける唯一のデバイスです）。 デスクトップユー
Apple San Francisco フォントのダウンロードとインストール
Apple San Francisco フォントのダウンロードとインストールについて紹介します。 概要 Macの画面デザインやモック画像を作成する場合にMac OS X のシステムフォントである、San Francisco フォントを利用できます。 ダウンロード https://developer.apple.com/fonts/ からダウンロードできますが、新しいWebページではダウンロード形式がdmgファイルとなり、dmgファイルを展開するとインストーラーが起動する仕組みのため、Macでのみ利用可能です。 https://developer.apple.com/fonts/にアクセスします。下図のページが表示されます。 ページを下にスクロールすると[Fonts]セクションにフォントのダウンロードボタンがあります。4つのフォント(San Francisco Pro, San Franci
UIにマイクロインタラクションを！ より良いUXのための７つの秘訣
Dmytroは、SoftServeのデザイン部門ディレクター兼SoftServe Unitedブログの寄稿者です。Dmytro氏はこの業界に13年以上携わっており、UIデザインやインタラクションデザイン、モバイルデザイン、IA及びUXを専門としています。 私たちは、本の良し悪しをその表紙で判断しがちです。良いデザイナーはそれを理解した上で、機能的なUIにおいてもキャッチーさを忘れません。しかし、キャッチーさはユーザーの興味を惹きつけることはできるかもしれませんが、購入などのコンバージョンに結びつくとは限りません。 きちんとビジネス目標を達成できるように彼らを引き込むには、どうすればよいのでしょうか？ この問の答えを探す中で、最終的にはユーザーに最も焦点を当てた「人間中心のデザインアプローチ」が不可欠であるということが分かるでしょう。つまり、人間らしさが大事であるということです。皆さんのアプ
PhantomJS と CasperJS で複数ページを一括キャプチャする ｜ Tips Note by TAM
Web 制作をしているとページの表示確認やコンポーネントの洗い出しなどで、大量にキャプチャを撮ってきたい時があります。 しかしブラウザのエクステンションで1枚ずつ撮るのも面倒です。 そこで PhantomJS と CasperJS を使うとキャプチャを自動化することができるということなので、先達たちの情報を参考に、キャプチャしたいURLと想定するデバイスを CSV で管理して、楽にキャプチャがとれるものを作成しました。 PhantomJS と CasperJS とは PhantomJS ですが、グラフィカルな画面のないブラウザで「ヘッドレスブラウザ」と呼ばれるブラウザです。コマンドラインからブラウザの機能を使うことができ、フォームの操作やページの要素を取得することができます。よく CI ツールと組み合わせて自動テストを行ったり Web スクレイピングで使われたりします。 PhantomJS
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
eex - collection of web eexperiments
eex is a growing collection of creative code experiments built using web technologies such as Canvas and JavaScript. Updated on a regular basis.
「UX」という言葉が聞こえないクックパッドのサービスデザインとは？
インタビューUX MILK編集部、編集スタッフの藤井です。 UXデザインの現場に突撃取材するUX MILKのインタビューコーナー、今回は株式会社クックパッドの倉光さんにお話を聞いてきました！ クックパッドではどんなUXデザインを実践しているのかお伺いしたところ、そもそもクックパッドのサービス開発現場では「UX」という用語はあまり聞こえてこないとのこと…！ その理由とは…!? 学生の方にもわかりやすくお仕事内容を説明いただいたので、ぜひ初心者の方にも読んでいただきたい内容となっています。それでは、早速インタビューをどうぞ。 倉光 美和（くらみつ みわ） 福岡県生まれ・デザイナー。家庭用ゲーム業界でゲームのUIデザインを経て、2015年にクックパッドへ入社。現在は主に iOS/Android アプリの開発・改善を手がけるほか、グループ会社のサービスデザイン組織のサポートなども。人間中心設計推進
Chrome拡張「Scraper」でWEBページ情報を手軽にスクレイピングしてデータ化する方法
Scraperとは Scraperは、WEBページ上の規則性のあるデータを手軽に取得することができるChrome拡張です。 例えば、テーブルデータや、Aリンクデータ、のような特定のHTML要素に入っている情報を、片っ端から取得してテーブルデータ化することができます。 また、その取得したデータをワンクリックでGoogleスプレッドシートに保存することができます。 テーブルデータのスクレイピングは以下の動画を見た方が分かりやすいかも。 以下では、その使い道などをいくつか考えてみました。 テーブルデータの取得 最もオーソドックスな使い方と言えば、動画にも出てきたテーブルデータの取得です。 例えば、信長の野望の以下のような武将データテーブルがあったとします。 これを、以下のように選択して、Chromeの右クリックメニューから「Scrape similar（似たものをスクレイプ）」を選択します。 す
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
Google画像検索からショッピング – シームレスなEC体験の増大｜株式会社アクトゼロ｜プランナーズブログ
こんにちは、アクトゼロ田中です。 今週の頭に飛び込んできたニュース。EC業界ではピックアップ間違いなしです。 Google画像検索からショッピング！ 今後ユーザーが欲しい商品の画像をGoogle画像検索上で見ていると、関連商品の広告が表示されるようになる。広告は検索結果の一番上に掲載され、その下にこれまでのようにウェブ上から集められた画像が表示される。 原文記事はこちら 私も個人的にオンラインで商品を購入する際は、目的のものが売っているであろうAmazonなどのサイトに元々目星をつけて、 そのサイトににまずアクセスして、そこから商品を購入しています。 このようなショッピングをされている方は多いのではないでしょうか？ これを打開するための施策ではないか？と思われるGoogleの対抗策が『Google画像検索からのショッピング』です。 新機能の概要 まずいつものように画像検索をします。 すると
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Styling Wizard: Google Maps APIs
SweetAlert
最上を受け継ぐヒトとモノ
坪田 朋
Just Keep Going ( with cape motion test ) by Diaco.M.Lotfollahi on Dribbble