PCやスマートフォン、タブレットなどデバイスの多様化に伴い、一般化したレスポンシブデザイン。Googleが推奨しており、ユーザビリティも向上することから現在では多くのホームページが導入しています。 自社のコーポレートサイトやブログのリニューアルを機にレスポンシブデザインの導入を検討しているWeb担当者もいるのではないでしょうか。とはいえ、Web制作スキル、外注費に余裕が無いという方もいるはずです。 そこで、Web制作スキル不要かつ無料で導入できるWordPressを活用することで、スキルと費用の課題を解決できるでしょう。WordPressはテーマ（テンプレート）をインストールするだけでデザインを変更できるのが特徴です。 今回は、WordPressで利用できるレスポンシブデザインに対応したテンプレートを紹介します。すべて無料で利用できるので、気になった方は試してみてください。 参考： レスポ

WordPressを使ってブログサイトを作成し、記事を量産することで、メディアとしての体裁は整います。 しかし、記事コンテンツがいくら面白いものであったとしても、あるものを置き忘れてしまうことでSNSへの拡散がされにくくなってしまうことがあります。 SNSのシェアボタンです。 WordPressのテーマによってはSNSのシェアボタンはすでに同梱されている場合もありますが、SNSボタンがないテーマも多く存在しており、一方で自作テーマを作成してゼロからWordPressサイトを立ち上げる場合には、プラグインを利用してSNSボタンを設置するのがよいでしょう。 今回は、WordPressでスタイリッシュなSNSボタンを設置できるプラグインとその注意点をご紹介します。 こうしたプラグインの多くは、シェアリンクを記事ごとに最適化してくれたり、シェア数をAPI経由で取得して表示してくれる機能を搭載してお

LINE・Facebook・Twitterなど、さまざまなソーシャルメディアがありますが、その中でも画像を気軽にアップロードして閲覧することができるインスタグラムは、若い世代を中心に人気を博しています。 ソーシャルメディアラボによれば、国内でも20代の4人に1人、30代の5人に1人、40代の8人に1人がインスラグムを使っていると言われており、マーケテングチャネルとしては今後も無視できない重要なSNSの1つだと考えられます。 一方で、ブログサイトやオウンドメディアをWordPressで立ち上げている場合には、インスタグラムのようなSNSを利用したほうが、ブログへの流入も見込めます。 今回は、インスタグラム関連機能を強化するためのWordPressプラグインをご紹介します。 インスタグラム関連機能を強化するWordPressプラグイン 1. AccessPress Instagram Feed

インフォグラフィックの製作の裏側 - SmartHR Tech Blog

TOP  >  Design , WebDesign  >  食べ物を中心にまとめられた可愛らしいデザインアイコンまとめ「100 Free Food and Party Icons」 UI面の向上に一役買ってくれるアイコン。視覚的サポートとして非常に役立つ存在であり、特に食べ物だったりアクションを表現する際には効果的で直感的な理解につながります。今回ご紹介する「100 Free Food and Party Icons」は食べ物やパーティーシーンなどを表現したアイコンがを中心にまとめられたアイコンセットです。 カラフルでポップなアイコンが全部で100個種類まとめられています。収録されているアイコンは下記よりご覧下さい。 詳しくは以下 はっきりとした線に、少し色を混ぜた色味のデザインはPOPという印象にとどまらず、スタイリッシュな印象を与えてくれます。食材からキッチン用品など、食に関するアイ

初期表示では非表示になっているナビ表示時やモーダル表示時の背景などで利用されるオーバーレイを表示する際のエフェクトサンプルを自分用にほしくて作ったのでシェアします。 すべてCSSを使って実装しているので、カラーや透過率などのデザイン的な部分はもちろん、表示されるスピードやタイミングについてもCSSで調整可能です。 また、全体的にシンプルで使いやすいもの中心なのでそのまま利用するだけでなく、いずれかをベースにさらに手を加えてユニークなエフェクトにしたりもできると思います。 紹介しているのは基本的にオーバーレイ要素として下記HTMLのようなdiv要素をひとつ用意し、それに対してCSSでエフェクトを付けたものになります。 複数の疑似要素を組み合わせているものは無理だと思いますが、簡易的なエフェクトによっては例えばbody要素の疑似要素をdiv要素の代用にした形に書き換えれば実装できると思います。

これ以上は長くなるため後述． Chromeは既に，Safariもようやく 上記の通り，Service WorkersがPWAでも最重要な機能の一つである．Chromeでは既に対応済み． しかしSafariが対応しておらず，世間的にはモチベーションの上がらない状況であった（やちまもその一人である）． Safariにおいて，Service Workersの実装状況 No active development が Under Consideration になったのは2015/12/041のことである． 20ヶ月という永遠とも呼べる時を経て，2017/08/032にようやく In Development となったわけであった． ちなみにMicrosoft Edgeでは既に開発中34である． だから何なのか SafariにService Workersの実装がなされると，一気にウェブアプリへの移行が

サービスデザインで陥りやすい３つの落とし穴｜クックパッド ※2017年6月に開催された「UX Failcon 〜先人たちの偉大な失敗と成功〜」よりレポート記事をお届けします。 271万品のレシピが投稿され、月間6000万人以上に利用されている料理レシピサービス「クックパッド」。同サービスのデザイナーとして、iOS/Androidのアプリの改善や新機能の開発を行っている倉光美和氏からは「サービスデザインでハマりやすい落とし穴」について語られた。 クックパッドにおけるサービスデザインは、“仮説を立てて、開発を実行し、ユーザー検証を行う”というサイクルで行っていく。倉光氏によれば、「仮説・実行・検証」という3つのフェーズごとに、それぞれ落とし穴が存在するという。 ※（レシピ数は2017年7月時点、利用者数は2017年3月時点の数字） 1. 理想の体験がユーザー視点でうまく定義できていない 仮説を

AbemaTVの松本俊介氏が登場。多くのアプリ開発者が一度は直面したことがあるだろう「アプリの文言がなかなか決まらない」問題。AbemaTV開発チームでも同様の問題を抱えていたという。その原因はなんだったのか。どうすれば文言は決められるの？ アプリの文言が決まらない問題｜AbemaTV ※2017年6月に開催された「UX Failcon 〜先人たちの偉大な失敗と成功〜」よりレポート記事をお届けします。 インターネットテレビ局「AbemaTV」。2016年4月の本開局から約1年4ヶ月で2000万ダウンロードに到達しようとしている。 まさに飛ぶ鳥を落とす勢いで成長を続けているAbemaTVだが、同アプリのUI/UXデザイナーを務める松本俊介氏、とある問題を抱えているという。 「アプリ内の文言が全然決まらないんです……。UI/UXの観点で見れば、すごく瑣末なことに思えるかもしれませんが、個人的に

ここ2, 3年、CSSアニメーションの進化がすごいですね！ 次のプロジェクトにさっそく使ってみたくなるようなものから、こんなことも出来るのか！という驚きのテクニックまで、CSSアニメーションのスゴ技・小技を紹介します。 Animated Gameboy in CSSのデモのアニメーションGIF まずは、CSSで作られたゲームボーイ。 上はデモをアニメーションGIFにしたものですが、下は生HTMLと生CSSです。 そのままのアニメーションでも驚きですが、ホバー時にはスケルトンになります。

2017-08-03デザイン言語システムを入れたらコミュニケーションコストがぐっと下がった話〜メドレー TechLunch〜ビールが美味しい季節ですね！ 最近飲みすぎて嫁に叱られて、飲み会自粛中のデザイナー・マエダです。 メドレーでは TechLunch という社内勉強会を実施しているのですが、デザインについて私も発表する機会をいただきましたので、その内容を紹介させていただきます。テーマは「DLS の導入について」です。発表資料は記事の最後をご覧ください。 DLS（デザイン言語システム）とはDLS とは DesignLanguageSystem の略で、すごい単純にいえばデザインガイドラインみたいにUI に一貫性をもたせるため、配色やレイアウト、タイポグラフィやマージンなどのルールを策定するものです。 私が主に担当しているオンライン診療アプリ「CLINICS」は、iOS、Android、W

モバイル向けのWebサイトではメニュー表示にハンバーガーメニューがよく使われます。しかし、実際のところハンバーガーメニューが一般的に分かりやすいわけでもありません。むしろタップして何が出るのか分からず躊躇してしまう人が多いでしょう。 そこで使ってみたいのがParadeiserです。ハンバーガーメニューに変わるメニュー機能を提供します。 Paradeiserの使い方 このように画面のヘッダー部にアイコンが並びます。 数が増えても大丈夫です。 Moreをタップすると追加のメニューが表示されます。 Paradeiserはスクロールするとヘッダー部のアイコンが自動的に消えるようになっています。そしてちょっと戻ると再度表示されます。ヘッダーにメニューが並ぶのはWebサイトでよく見られた形式ですが、常にあると邪魔になります。両方のいいとこ取りな機能ではないでしょうか。 ParadeiserはJavaS

こんにちは、Webコンサルティング事業部の藤沢です。今回は内部リンクの話をしようと思います。 私がクライアントサイトのSEO課題解決のため最も多く提案しているのが内部リンク設計の見直しかもしれません。キーワード戦略にのっとって正しく内部リンク設計をしていけば、ページ本来の評価を得ることができ、そのSEO効果は絶大です。逆にいかに作り込んだWebページでも内部リンク設計をミスってしまっていると検索エンジンから低い評価を受けてしまうことが往々にしてあります。 そこで今回は成功事例を交えながら、改めてSEOにおける内部リンク設計の重要性やポイントについて触れていこうと思います。 ＼疑問や不明点はお気軽にご質問ください！／ 事例紹介 まずは実際に私がSEO施策を担当しているECサイトで、内部リンク設計を見直すことで自然検索流入数を大幅に増やすことに成功したクライアント事例を紹介します。 サイト概要

読み込み速度を高速化することは、戦略上非常に重要なことです。 ユーザーエクスペリエンス(UX)の面からも、SEO上の観点からも、読み込みの遅いサイトより速いサイトのほうが有利です。 UXの観点では、Google Researchのブログ記事より、サイトの読み込み速度が速ければ速いほど、ユーザーは快適に感じ、サイト内の滞在時間まで長くなることが分かっています。 さらにKissmetricsによれば、読み込みに3秒以上かかってしまうと、40％の人が読み込みを諦めて離脱してしまうことが分かっています。 SEOに関して言えば、Googleが検索結果を決めるのに使っている200以上もの要素の中の一つに明らかにページ読み込み速度を使っていることが明らかになっています。 もちろん、GoogleだけでなくBingもページの読み込み速度を重視しています。 ferretでは、これまでSVGを使った画像の最適化

Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。 皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。 前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を