Slack（スラック）に「RSS（アールエスエス）」を導入してインプットの効率を上げる方法とは？
マーケターにとって、日々移り変わる情報の収集は必要不可欠です。そこで、効果的なインプット方法として紹介するのが、Slackに「RSS」を導入する方法。知りたいサイトの情報をこまめに確認しなくても、更新情報を通知で知らせてくれるので、無駄な作業がなくなり効率的にインプットが可能です。 RSS（アールエスエス）とは RSSとは、ニュースやブログなど、各種Webサイトの更新情報を配信するための文書フォーマットの総称です。Slackと連携させることによって、気になる記事やブログが更新されると通知が来るようになります。 今までは調べたい情報を探すために、わざわざそれぞれのメディアに訪問して情報を得る必要がありました。RSSを使うことで、Slack上に欲しい情報が集まり、更新情報チェックの作業を効率化できるので、大幅にインプットの時間を削減できます。 参考：SlackのRSS機能を使って情報収集するや
WordPress（ワードプレス）の初期設定方法と基本的な使い方
Web集客にとって大切なことの一つに、品質の高いコンテンツを作成することが挙げられます。ユーザーのニーズを捉えたコンテンツを作成することに注力したいので、Webサイトの制作や管理にはできるだけ時間やコストをかけたくない人も多いでしょう。 CMS（コンテンツ・マネジメント・システム）は、誰でも簡単にWebサイトの制作や管理ができるものです。その中でも代表的な存在であるWordPressは無料で利用でき、世界中の企業や個人に利用されています。 そこで今回はWordPressをこれから使いたいと思っている人のために、初期設定や基本的な操作方法をまとめました。 圧倒的に使いやすいCMS！見たまま編集のferret One 直感的な操作で、Webサイト・LP・フォームも作成も自分で完了！さらに、問い合わせの管理や効果測定もできてPDCAが高速に回ります。 WordPress（ワードプレス）とは Wo
LP（ランディングページ）の効果を上げる色の選び方とは？色彩心理学に基づく制作術
LP（ランディングページ）の効果は十分に出ていますか？ LPは購入や問い合わせに直結するページであり、Webマーケティングの肝となる存在です。継続的に売上げが上がるLPを作ることができれば、反響が増えて無駄なテレアポなどの営業をする必要がなくなり、今まで新規営業にかけていたコストをリピーター創出や新規事業立ち上げに回すことができます。 消費者に行動を起こしてもらうLPを作るためには、色選びがとても大切です。今回は色彩心理学に基づいて、人々がすぐに行動を起こしたくなる色の選び方を紹介します。LPの効果を上げる色を知り、売り上げをアップさせるLPを制作しましょう。 目次 メインカラー・サブカラー・コンバージョンカラーの決め方 色彩心理学における各色のイメージ 【業種別】LPにおすすめの色 色の力で「ついクリックしたくなるLP」にする ▼ LPを自社で作成・量産できるツールはこちら →詳細はこち
打ち込むより簡単！保存しておくと便利なCSSスニペット18選
ホームページを製作する際、何度も繰り返し使うコードはスニペットとしてまとめておくと便利です。 スニペットとは「切れ端」「断片」という意味で、プログラミング言語の中で簡単に切り貼りして再利用できる部分のことです。 とりわけCSSは、HTMLやJavaScript以上に、繰り返して使うコードが多いので、そうしたコードをまとめておくとよいでしょう。 今回は、何度も打ち込まなくてもコピペで使える、保存しておくと便利なCSSスニペットをまとめてみました。 スニペットとしてテンプレート化することで、一部分を変えるだけで再利用することができます。 保存しておくと便利なCSSスニペット 1. CSSリセット さまざまなブラウザでデフォルトの表示方法がありますが、それらを同じように表示させるCSSリセットと呼ばれるテクニックがあります。 CSSのリセット化コードはさまざまありますが、画像のレスポンシブ化とm
Webデザインが進化したからこそ「やってはいけない」5つのこと
Webサイトがレスポンシブ対応していたり、常に表示する必要のないメニューはハンバーガーメニューで隠したりと、業界で共有されている*Webデザインの「あるべき姿」*は、常に少しずつ進化しています。 その下支えになっているのがブラウザ技術です。Webrageの調査によれば、Internet Explorerを超えてGoogle Chromeが国内外で圧倒的シェアを獲得していますが、Google Chromeは6週間ごとに安定版がリリースされており、アップデートごとにブラウザの技術も進化しています。結果的に、Webデザインでできる幅も広がるのです。 しかし、Webデザインでできることが多くなったからといって、必ずしもデザイン上のテクニックがユーザー体験(UX)を向上させるとは限りません。 そこで今回は、Webデザインが進化したからこそ「やってはいけない」5つのことをまとめました。よかれと思って実
Appleも実践！シンプルだけど魅力的なデザインを実現しているホームページ6つの心得
デザインが非常に洗練されていると評判のAppleは、製品だけでなくホームページも驚くほどシンプルです。 シンプルで印象的な見た目は、時に冗長で複雑な説明をするよりも説得力があります。 ただ、単にいくつかの要素を考えもなしに置くだけでは、シンプルなデザインとは言い難いでしょう。 シンプルとは、余計なものをそぎ落とすだけでなく、本当に大切なものを選りすぐっていった先にこそあるからです。 今回は、シンプルだけど魅力的なデザインのホームページを作成する際に気をつけたい7つの心得をご紹介します。 「シンプルかつ、万人に訴求するようなデザイン」は、どのような考えをベースに作成されているのでしょうか。 ポイントごとに詳しく見てみましょう。 シンプルだけど魅力的なデザインのWebサイトの7つの心得 1. 伝えたい大テーマを１つに絞る １ページにつき伝えたい大テーマを１つに絞っていくことは、シンプルなデザイ
容量だけで選んで大丈夫？無料オンラインファイルストレージの人気11サービス比較と特徴紹介｜ferret [フェレット]
ファイルやドキュメントなどのデータの共有や保存をするために、オンラインファイルストレージの利用は欠かせません。記事では、数あるオンラインファイルストレージサービスの中から、無料で人気があるものを18個ピックアップしました。これから使おうと思っている方や、今使っているサービスから他のサービスに乗り換えを考えている方は、ぜひ参考にしてみてください。 オンラインファイルストレージサービスとは オンラインファイルストレージサービスとは、インターネット上でファイルやドキュメントなどのデータを保管することができるサービスのこと。 場所やデバイスを選ばず、インターネットに接続していればどこでも閲覧・アップロード・共有などを行えます。Web上で直接利用できるものや、専用ソフトが必要なものなどがあります。 これらのサービスの多くは、Eメールで送れなかったファイルをファイルストレージにアップロードし、そのUR
![容量だけで選んで大丈夫？無料オンラインファイルストレージの人気11サービス比較と特徴紹介｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a53ad9c72a31b82132a785b085bfd4d595d83178/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F2377%2Fog_image%2Fdefault-f0f09159bb2c1afe52b1b599b78e0bb2.jpg)
面倒な画像のサイズ変更をワンクリックで！リサイズツール7選
ホームページに画像を掲載するとき、画像サイズが合っていないと画像が小さいと粗くなったり、思うような表示にならなかったりします。Illustrator（イラストレーター）やPhotoshop（フォトショップ）のような画像編集ソフトでサイズを変えることもできますが、複数の写真を一度に変換したいときにはあまり適していません。 そのような時に便利なのが、画像リサイズツールですWeb上では、一括で複数の画像サイズが変更できたり、定形サイズに当てはめて手軽に画像加工を行えたりするリサイズツールが公開されています。 今回は、サイズ変換に役立つ7つの画像リサイズツールを紹介します。ホームページを作成する際に画像のサイズがバラバラだと、見た目にも統一感が失われてしまいます。リサイズツールを活用して、統一したサイズで画像の掲載ができるようにしておきましょう。 インストールせずに利用できるブラウザ型の画像リサイ
iPhone X 時代のモバイルナビゲーションアイデアに関する3つの考察
ベゼルが究極的に少なくなったiPhone X が登場したことで、デザイナーは新しい局面を迎えているかもしれません。 全画面であるという前提のないモバイルナビゲーションを再構築する時期が迫ってきました。 しかし、まだ11月上旬に発売したばかりで戸惑っているデザイナーの方も多いのではないでしょうか。 そこで今回は、モックアップ投稿サイトDribbleの投稿を参考にした、iPhone X時代のモバイルナビゲーションアイデアに関する3つの考察をご紹介します。 従来のiPhoneの使い勝手とは違うからこそ考えて欲しいことをまとめてみました。 iPhone X 時代のモバイルナビゲーションアイデア 3つの考察 SamsungのGalaxy S8やAppleのiPhone Xのように、ベゼルレスでスクリーンに没入できるスマートフォンは、今後ますます増えて来るはずです。 WebデザイナーとしてWebコンテ
優れたデザイナーはやっている？デザイン力を鍛える前に強化しておきたい4つのスキル
デザイナーと一口にいっても、世の中には*「優れたデザイナー」と「単なるデザイナー」*がいます。世界中からリスペクトを集める、代替の効かないかけがえのないデザイナーは、人のいないところ、見えないところで努力をしているものです。 デザイナーはデザイン力を鍛えるのはもちろんそうですが、デザイン力に掛け算をして鍛えておきたいスキルがあります。 今回は、デザイン力を鍛える前に強化しておきたい4つのスキルをご紹介します。 憧れのデザイナーは、デザイン力はもちろんですが、着眼点が違うはずです。そうした着眼点を生み出すためのスキルを確認してみましょう。 デザイン力を鍛える前に強化しておきたい4つのスキル 1. マーケティング 画像引用元：BURST by shopify デザイナーは単なる自己表現を行うための製作者ではなく、大抵の場合はクライアントワークです。当然ながら、デザイナーは出資者であるクライアン
CSSも軽量化の時代！コーダーが押さえるべきCSSコーディング5つのポイント
SassやLESSなどのCSSプリプロセッサーを使わずにCSSを書いているひとは未だに多いのではないでしょうか。 日常の業務でCSSを記述していると、どうしてもCSSはセレクタやプロパティの繰り返しが多くなってしまい、冗長になりがちです。 CSSだけでなく、あらゆる要素には軽量化が求められます。 ページ速度が遅くなれば、それだけ直帰率が多くなり、また検索エンジンもそのことをマイナスに評価して、結果的にページ全体のアクセス減につながってしまいます。 最近では、idセレクターやHTMLタグのセレクターを取り除く動きもあります。 効率よくCSSを書いていくには、どのようにして書いていけばいいのでしょうか。 今回は、コーダーが押さえるべきCSSコーディング5つのポイントをご紹介します。 シンプルに書くことを意識すれば、ファイル容量が軽量化するだけでなく、だれもが読みやすいファイルになります。 具体
デザインデータを楽々管理！デザイン版バージョン管理システム「Abstract」の使い方
デザイナーの皆さん、こんにちは。 突然ですが、デザイナーの皆さんはGitやGitHubを使っていますか？ GitやGitHubは、プログラマーやエンジニアには非常に人気のあるバージョン管理プラットフォームです。 公開されているソースコードを閲覧したりSNSの機能も備えているので便利なのですが、やはり一番便利なのは、複数人でコーディングを行うときに同じファイルのたくさんのバージョンがあれば、差分を検知してマージ(統合)することができる点です。 GitやGithubはグラフィックファイルをアップロードして管理することもできます。 ところが、プログラミングで使用する基本的に文字の羅列であるバイナリーファイルとは違い、グラフィックファイルは随分と勝手が違います。 テキストと違って差分を検知してマージすることが難しく、3つ以上のバージョンがあるときにはなおさら大変になります。 今回は、デザインに特化
7つのWeb技術！Webデザイナーやフロントエンドエンジニアが押さえるべき流行をキャッチアップ
近年、インターネットやWebの世界では様々な技術が登場。 Webデザインやフロントエンドにおいても急速に技術が進歩し、複雑でカッコいいホームページをより少ない工程で制作することが可能になりました。 ただし、その反面、Webデザイナーやフロントエンドエンジニアは波に乗り遅れないように、しっかりと流行をキャッチアップすることが求められています。 そこで今回は、Web関係者必須の7つのWeb技術について、解説していきます。 最近Web界隈で流行している7つのWeb技術とは？ 1. AMP AMP(Accelerated Mobile Pages)とは、GoogleとTwitterで共同開発されている、モバイル端末でWebページを高速表示するためのプロジェクトやHTML規格のことです。 Googleはモバイル端末におけるユーザー体験を改善してブラウジングをより快適なものにするために常に模索を続けて
Photoshopはもう使わない!? 場所を問わず画像編集できるCSSデザインフィルターの画像編集エフェクト9選
CSS3では、Photoshopのようなフィルター効果を再現するイメージフィルターという機能があります。 Photoshopを使用すれば画像加工を行うことができますが、外出先などで画像の編集が行えない……そのような経験、Photoshopを使用するデザイン関連の仕事をされている方なら一度や二度ありますよね。そんな時に、少しのコードをCSSに足すだけで画像編集できてしまう機能がイメージフィルターです。 今回は、画像の明度や彩度などを簡単に調整することができる、CSSイメージフィルターについてご紹介します。 とてもシンプルなコードばかりですので、使えそうなものがあれば、早速試してみてください。 CSSフィルターができること ～基本機能「９」～ 1. レンズで覗き込むようにぼかしを加える「blur」 filter: blur( ぼかしの長さ ); blurを指定すると、ガウシアンぼかしタイプのブ
【WordPress】作業は"コピペ"のみ！デザインや機能性を向上させるコード6選
コンテンツマーケティングの時代とはいえ、WordPressである程度記事を書き溜めてくると、デザインや使いやすさにも注意を払いたくなることがあります。せっかく素晴らしい内容の記事を書いても、読みやすいデザインになっていなければ、記事の価値が目減りすることに気づき始めるからです。 そこで今回は、少しのコードをコピー＆ペースト（以下、コピペ）するだけで、WordPressのデザインや機能性を向上させる便利なコードを6個ご紹介します。 コピペだけでWordPressのデザインや機能性を向上させるコード 1. 丸いサムネイルを出力する ブログサイトのトップページや、記事一覧のサイドバーで表示される機会の多いアイキャッチ画像。SNSでシェアする場合にも表示されるので、設定しておきましょう。 デフォルトではアイキャッチ画像は利用できないので、functions.phpに下記のコードを追加します。 <c
レスポンシブ対応のCSSフレームワーク22選
手軽に素敵なホームページを作成することができるCSSフレームワークが沢山登場しています。アイコンなども全てセットになったものなどもあり、コーダーでなくとも簡単に作業できることから人気を博しています。 今回は、レスポンシブに対応したCSSフレームワークをに紹介します。CSSフレームワークを選ぶ際の参考にしましょう。 CSSフレームワークとは？その特徴とメリット CSSフレームワークを簡単に言うと、Webサイトに必要なパーツや主な機能などがセットになったパックのことです。Webサイトをデザインするとき、通常はイチからデザインを考えて、パーツを揃え、CSSを記述していく必要があります。これは時間がかかる上、Webデザイナーやエンジニアなどの専門家がいない場合、整ったデザインのWebサイトを制作することは非常に困難だと言えるでしょう。 そんなときに便利なのがCSSフレームワークです。CSSフレーム
本当に使えるコーディングチェックサイト厳選3選
コーディングの正確性について、不安を持つWeb制作担当者は少なくないのではないでしょうか。 コーディング後に、ミスが発覚すると修正作業のために時間を大幅にロスしてしまう可能性があります。 できるだけミスを防ぐためにも、適切なコーディングができているかどうかをチェックできるツールはストックしておいた方がいいでしょう。 今回は、コーディングを担当しているものの自信が無いという方にオススメのコーディングチェックツールをご紹介します。 コーディングで気を付けなくてはいけないこと 制作するにあたって、コーディングレベルがありますが、HTML・CSSを利用する際に気を付けなくてはいけないことは単純に「正確に動作し、ブラウザによってサイト崩れが発生しない」ことなのではないでしょうか。 例えば、「リンクページをクリックしたが、正確にページが表示されない」や「PCでサイトを見たときには正常に動くのにスマホで
【12月編】モックアップに大活躍！無料のPSDファイル50選
製品パッケージやホームページ、ロゴといったデザインをする上で、イメージを用意したほうが伝えやすい場合があります。 そこで、ぜひ活用したいのがPSDファイル形式のテンプレートやモックアップです。 今回はそんなPSDファイルの中から、最新の素材だけを厳選してご紹介します。 多くのPSDファイルは、レイヤーが分かれているため、手軽に編集して使うことができます。 ベースのデータに任意の画像を差し込むだけで使えますので、ぜひチェックしてみてください。 最新の無料PSDファイル50選 1.Psd Business Card Mock-Up Vol34 http://www.pixeden.com/psd-mock-up-templates/psd-business-card-mock-up-vol34 名刺を斜めに配置したPSDモックアップです。 シンプルな名刺をクールに見せるのに役立ちます。 2.P
2015年Web・デザイン界隈で浸透しつつあるデザイントレンド15選
ホームページのデザインはある程度形式化されている部分もありますが、そんな中でもトレンドの変化があります。 特に近年では、スマートフォンが普及したことによりマルチデバイスに配慮する形でデザイントレンドも変わってきました。 その時代に最適なデザインを知っておくことで、ユーザーにとって使いやすく、見た目も優れたものを作ることが可能です。 デザインの機会がある方は、常に最新のトレンドを理解しておきましょう。 今回は、Web・デザイン界隈で特に浸透しつつあるデザイントレンドをまとめでご紹介します。 2015年話題のデザイントレンドまとめ 1.パララックス・デザイン ※このWebサイトは現在公開されていません 複数のイメージ画像、パーツを速度や方向を変えて動かすことで、奥行き感を表現するエフェクトです。 別名「視差効果」ともいい、こちらも2013年頃からパララックスデザインを取り入れたホームページを目
ココだけ欲しい！Webデザインのパーツをまとめたギャラリーサイト36選
この記事は2015年10月22日に公開された記事を再編集したものです。 デザイン作業に慣れてくると、どうしても自分の癖が出てしまい、似たようなデザインばかりになってしまいがちです。特にWebデザインのパーツは、毎回同じようなデザインを作ってしまうことも少なくありません。しかし、自分が持っているアイデアだけでは、なかなか新しいデザインは浮かんでこないものです。 そこでオススメしたいのがギャラリーサイトです。その中でもパーツごとに収集したギャラリーサイトは、デザインの「部分」だけでも参考にすることができるため非常に便利です。デザインアイデアが欲しい時こそ、多くのヒントが詰まっている素材サイトを活用しましょう。 今回は、Webデザインのパーツをまとめたギャラリーサイトを36個まとめてご紹介します。 ※サイトによっては素材やソースコードなどを配布・掲載しているものもあります。ご利用の際は、必ず利用
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
