ウェブライダー松尾氏が考える文章の「分かりやすさ」「コンテンツの質」とは
SEOライティングで有名な「沈黙のWebライティング」を執筆したウェブライダー社の松尾茂起氏。前編では文賢が目指す未来のコミュニケーションの形について聞きました。 今回は変化が許容された先にある「文章の分かりやすさ」とはどのように定義されるのかを伺いました。 ▼前回の記事はこちら▼ ウェブライダー松尾氏が目指す「文賢」によるコミュニケーションの形 アートとデザインの視点から見る「分かりやすさ」 ferret： 前回のお話を受けて、この先「分かりやすさ」というのがどうなるのか気になります。 松尾氏： 結局、「分かりやすい」というのはアートとデザインの視点にすごく近いと思っています。アートは理解されることが目的ではなく、好きに感じてもらうことが大事です。しかしデザインは理解されることが目的であって、好きに見てもらうわけではない。「こう動いてもらいたい」という導線をつくることがデザインなんです。
専門知識がなくても大丈夫！HTMLメルマガを配信するなら知っておくべきツール9選
メールマガジン(以下メルマガ)を送信する際の配信形式として、HTMLメールがあります。 HTMLメールであればテキストだけでなく画像を利用できるため、インパクトの大きい訴求を行うことが可能です。 今回は、HTMLメルマガを送信するなら知っておくべきツールを、作成・配信ツール、表示確認ツール、テンプレートツールの3つの項目に分けてご紹介します。 どれも手軽に利用することができるツールばかりですので、本記事を参考に自社に必要なツールを選択してください。 HTMLメールを手軽に作成・配信するなら 1.Benchmark Email http://www.benchmarkemail.com/jp/ 利用料金：1,500円〜/月 無料トライアルあり HTMLメールに特化したメール作成・配信システムです。 コードの専門知識がなくても、手軽にHTMLメールを作成して配信することができます。 コードエデ
canonicalとは？URLの正規化でSEOのマイナス評価を避けよう
突然ですが、canonical属性タグと聞いて、効果と使い方を正しく答えられますか？URLの正規化で非常に重要な役割を果たすのが、*canonical（カノニカル）*です。URLの正規化を行わないとリンクポピュラリティの分散を招き、SEO対策的にはNGです。 設定を間違えると検索結果から削除されてしまうなど、慎重な対応が必要なものでもあります。しかし、正しく使うことでリンクポピュラリティの分散も防ぐことができますので、必ず対応しておくべきものでもあります。今回は、canonicalの意味と正しい使い方を紹介します。 目次 canonical（カノニカル）とは canonical（カノニカル）の正しい使い方 canonicalに関するよくある間違い canonical（カノニカル）に関するよくある質問と回答 canonical（カノニカル）によるURLの正規化はあくまでも対応策でしかない ▼
CSSのスキルをもう1レベル上げるための7つのポイント
CSSは現代のWebページ制作になくてはならないものです。 Web制作に関わる人であれば、誰でもそのスキルを磨いていきたいと思っているのではないでしょうか。 ただ、、JavaScriptなどのフレームワークに関しての情報はエンジニアの交流会などで頻繁にシェアされるものの、CSSについては新しい技術が出てこない限りやりとりされることは少ないのが現状です。 CSSは、主にWebの見た目に関わる技術なので、レベルを上げることはWebデザインの表現力にそのまま直結します。 今回は、CSSの技をもう1レベル上げるための7つのポイントをご紹介します。 １：一番シンプルなCSSリセット marginやpaddingなど、ブラウザ間の表示誤差を修正する方法の一つに、CSSリセットと呼ばれる設定を行う方法があります。 通常、CSSリセットはnormalize.cssなど用意されているリセットライブラリを外部
AMP（Accelerated Mobile Pages）とは？今から導入するための基礎知識と手順書マニュアル
*AMP（アンプ）*とは、「Accelerated Mobile Pages」を略したもので、Googleが推奨するモバイルページの表示速度を高速化してユーザー満足度を高める手法のことです。2016年、アメリカで先立って始まったAMPは、6月20日に日本でも対応開始。今では数多くのWebページがAMPに対応しています。 今回は、AMPの基礎知識や導入方法について解説していきます。 目次 AMPとは AMPに対する各プラットフォームの現状 Google Yahoo はてなブックマーク AMPが速くなる仕組み プリレンダリングに最適化 JavaScriptが使えない ローディングに優先順位がある AMPを構成する3要素 AMP HTML AMP CDN AMP JS AMPを利用するメリット コンテンツが高速表示される 通常検索結果枠とは別の枠で表示される ユーザーのストレスを軽減できる 検索
デザイナーとエンジニアに聞いた！一緒に働くWebディレクターに求めたい「10」の知識とスキル
プロジェクト全体のディレクションを行うWebディレクターの仕事は、進捗管理、人選、スケジュール調整、品質管理と多岐に渡ります。また、それどころか場合によっては取材・撮影までかかわることも少なくありません。 そうなると必然的に求められるのがコミュニケーション能力です。Webディレクターはホームページ制作の依頼主である企業担当者やデザイナー、エンジニアをはじめ、様々な職種の人たちと円滑に仕事を進めるスキルも求められます。 仕事内容が幅広く、1人ひとり業務の管理・進行方法も異なるので、周囲の人たちと上手くいかない場面に遭遇することも珍しくありません。 そこで今回は、一緒に働くケースの多いデザイナー職の方に、ともに働くWebディレクターに持ち合わせていてほしい「10個」の知識とスキルをご紹介します。 頑張っているのに、なぜかデザイナーやエンジニアの方々と上手くいかない……という方は、これを機に日々
Webデザインが進化したからこそ「やってはいけない」5つのこと
Webサイトがレスポンシブ対応していたり、常に表示する必要のないメニューはハンバーガーメニューで隠したりと、業界で共有されている*Webデザインの「あるべき姿」*は、常に少しずつ進化しています。 その下支えになっているのがブラウザ技術です。Webrageの調査によれば、Internet Explorerを超えてGoogle Chromeが国内外で圧倒的シェアを獲得していますが、Google Chromeは6週間ごとに安定版がリリースされており、アップデートごとにブラウザの技術も進化しています。結果的に、Webデザインでできる幅も広がるのです。 しかし、Webデザインでできることが多くなったからといって、必ずしもデザイン上のテクニックがユーザー体験(UX)を向上させるとは限りません。 そこで今回は、Webデザインが進化したからこそ「やってはいけない」5つのことをまとめました。よかれと思って実
マイクロインタラクションとは？UXに取り入れる際の5つのポイント
「"中身を読まずに"表紙のデザインやタイトルを見て本を買ってしまった」 あなたも、このような経験はありませんか？ この行動自体は、決して珍しいものではありません。 だからこそ、本や雑誌、書籍と同様に、ホームページも*「見栄え」や「タイトル決め」*というのは非常に重要な要素といえます。 しかし、「UXデザイナー」という職業が確立された昨今、今求められているのは外観（見た目）だけではありません。 ホームページでいえば『内容』や『体験』にフォーカスする必要があります。 それでは、どうすればユーザーに満足してもらえる内容・体験になるのでしょうか。 その答えのヒントとなるのが*「ヒューマンセンタードデザイン(Human-centered Design、人間中心デザイン)」*です。感情や日常表現も含めて普段使っている言葉と同じ言葉で語りかけ、必要な時にはあなたを笑わせたり驚かせたりします。AIチャット
次世代のロゴデザインに欠かせない！レスポンシブロゴの基本
レスポンシブデザインがWebに旋風を巻き起こしてから10年が経過し、今ではWebサイトの標準となっています。モバイル端末による閲覧は今や全トラフィックの3/4を超え、ブラウジング自体のトラフィックも全体的に増加したことで、従来のWebサイト設計に大きなユーザビリティの問題を引き起こすようになりました。 その中で注目を集めているのが、レスポンシブロゴと呼ばれる新しいロゴの考え方です。 今回は、次世代のロゴデザインに欠かせないレスポンシブロゴの基本についてご紹介します。 表示サイズに関するユーザーの要求に応えるために、ロゴについて再考することは非常に重要です。 次世代のロゴデザインに欠かせない！レスポンシブロゴの基本 レスポンシブロゴ（Responsive Logos）とは、様々な画面サイズに合わせて数段階に変化するロゴのことを指します。これまでは、スマートフォンやタブレット、デスクトップなど
alternate属性とcanonical属性を正しく使ってスマホサイトの存在をGoogleに伝えよう｜ferret [フェレット]
ウェブサイトを運営していて、デスクトップ用サイトURLとスマホ用サイトURLを分けている場合あります。この場合、きちんと検索エンジン向けに設定を行わないとスマホ用サイトの存在を認識してくれないケースがあります。それは主に、URLをデスクトップとスマホで分けて運用しているページの場合が多いです。 このような場合は、デスクトップ用URLとスマホ用URLの双方を検索クローラーに伝える必要があります。 今回は、canonical属性とalternate属性を使ってスマホページの存在を検索エンジン向けに伝える方法を紹介します。 目次 canonicalとは alternateとは Googleがサポートするデスクトップ用サイトとスマホ用サイトの最適化方法は3種類ある URLを分けている場合の対策方法 レスポンシブデザインの実装を検討しよう よくある質問とその回答 canonicalとは canoni
![alternate属性とcanonical属性を正しく使ってスマホサイトの存在をGoogleに伝えよう｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/0730dbcc8279e5a9cf9e7e90cece0fca4736d6cf/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F1426%2Feyecatch%2Fdefault-2b35b1392942385f6e4a644bf6c0ba8b.jpeg)
コーディング初心者こそ知っておきたい便利な「CSS関数」5選
HTMLやCSSでホームページのデザインを行うことを、一般的には「プログラミング」とは言わずに「コーディング」と言います。 論理的なバックエンドでの実行処理を考えるプログラミングとは違い、HTMLやCSSは「見え方」や「見た目」の部分に責任を持つことが多く、コードによって「組み立てる」イメージからそのように呼ぶのでしょう。 しかしながら、CSSは通常プロパティと値をセットで指定していきますが、*「CSS関数」*と呼ばれる便利な関数も用意されています。 これらの関数を使うことで、計算を実行したり、条件を指定したり、特定の値を別のフォーマットに変形したりすることができます。 そこで本稿では、*コーディング初心者こそ知っておきたい便利な「CSS関数」*を5つ紹介していきます。 普段業務などであまりCSS関数を活用していない方にこそ、CSS関数のよさを知って、使えそうな場面でぜひ活用していただきた
いつか役立つ！知っておくと便利なCSSセレクタ5選
CSSはその登場当初から現在に至るまでにさまざまな進化を遂げており、ひと昔であれば複雑なJavaScriptで書かないといけないような所作も、驚くほど簡単にできるようになりました。 とりわけCSSの進化が著しかったのはCSS3(CSS Level 3)が登場してからで、単純な挙動しかできなかったこれまでのCSSに、複雑な処理を実装できるようになりました。 それぞれセレクタやプロパティはCSS3に次ぐ次世代のCSSだと評されています。 そこで今回は、CSS Level 4で登場した、知っておくと便利なCSSセレクタをご紹介します。 知っておくと便利なCSSセレクタ5選 CSS Level 4には、例えばnth-childのようなよく知られているセレクタもたくさんありますが、それ以外にもユニークなセレクタが含まれています。 それらの中には新しい多くの便利な擬似セレクタもあり、覚えておいて損はあ
CSSの読み込みを高速化するための5つのポイント
読み込み速度を高速化することは、戦略上非常に重要なことです。 ユーザーエクスペリエンス(UX)の面からも、SEO上の観点からも、読み込みの遅いサイトより速いサイトのほうが有利です。 UXの観点では、Google Researchのブログ記事より、サイトの読み込み速度が速ければ速いほど、ユーザーは快適に感じ、サイト内の滞在時間まで長くなることが分かっています。 さらにKissmetricsによれば、読み込みに3秒以上かかってしまうと、40％の人が読み込みを諦めて離脱してしまうことが分かっています。 SEOに関して言えば、Googleが検索結果を決めるのに使っている200以上もの要素の中の一つに明らかにページ読み込み速度を使っていることが明らかになっています。 もちろん、GoogleだけでなくBingもページの読み込み速度を重視しています。 ferretでは、これまでSVGを使った画像の最適化
互換性抜群！「Web Animations API」の基本をおさらいしよう
ホームページ上で何らかのアニメーションを実行しようとするときには、どのような技術を使ってアニメーションを作ればいいのか悩みます。 というのも、アニメーションを実装するのに、CSSアニメーションやCSSトランジション、HTML5のCanvas、SVGアニメーション、GIFアニメーション、JavaScriptでDOM操作をすることで実装するアニメーションなど、さまざまなものがあります。 しかしながら、決定版とも言える新しいアニメーションフレームワークとなるJavaScriptのAPIの策定が、W3Cで進んでいます。 それが、今回ご紹介する*「Web Animations API」*です。 通常、スクリプトを使ってアニメーションを実装する際には、いざ作ろうとしてみると、サポートブラウザの問題やデバイス間での見え方の違いなどで、考慮すべき点がいろいろ多いのが現実です。 しかし、このWeb Anim
フリーフォント｜無料で商用利用可能なフォント88選、日本語・毛筆・ポップなど
今回は、商用OK＆無料の日本語フォントをたっぷり88個まとめてご紹介します。 ▼デザインおすすめ資料まとめ デザインのコツがわかる！オススメお役立ち資料5選 ferretで公開しているデザインに関する資料の中から、おすすめの資料をピックアップして紹介します。日々のマーケティング業務にお役立てください。 目次 まとめて日本語フォントを探せるサイト ポップ・可愛らしい・優しい印象のフリーフォント 高級感・繊細・伝統的な印象のフリーフォント カジュアル・スマート・シンプルな印象のフリーフォント 個性的なフリーフォント フリーフォント使用時に規約を確認しよう まとめて日本語フォントを探せるサイト たくさんの日本語フリーフォントがまとまっているWebサイトから好みのフリーフォントを探しましょう。 フロップフォント フロップフォント フリーフォントと無料素材が配布されているサイトです。日本語フォントだ
CSSも軽量化の時代！コーダーが押さえるべきCSSコーディング5つのポイント
SassやLESSなどのCSSプリプロセッサーを使わずにCSSを書いているひとは未だに多いのではないでしょうか。 日常の業務でCSSを記述していると、どうしてもCSSはセレクタやプロパティの繰り返しが多くなってしまい、冗長になりがちです。 CSSだけでなく、あらゆる要素には軽量化が求められます。 ページ速度が遅くなれば、それだけ直帰率が多くなり、また検索エンジンもそのことをマイナスに評価して、結果的にページ全体のアクセス減につながってしまいます。 最近では、idセレクターやHTMLタグのセレクターを取り除く動きもあります。 効率よくCSSを書いていくには、どのようにして書いていけばいいのでしょうか。 今回は、コーダーが押さえるべきCSSコーディング5つのポイントをご紹介します。 シンプルに書くことを意識すれば、ファイル容量が軽量化するだけでなく、だれもが読みやすいファイルになります。 具体
もっと早く知りたかった！SVGを扱うなら知っておきたいタグ＆プロパティまとめ
SVGが一般化してきたとはいえど、「SVGは聞いたことあるけれど、使ったことはない」というWebデザイナーの方も多いのではないでしょうか。 実際、長い間GIFやJPEG、PNGなどのビットマップ形式のデータが主流だったWeb業界ではあったので、SVGのようなベクター形式のデータが扱えるようになったとは言っても、「新しもの好き」の人が扱う目新しいフォーマットだと思っているひとが多いのも事実です。 しかし、SVGは画像劣化がなかったり、アニメーションを扱えたり、テキストエディターで直接カスタマイズができたり、CSSやJavaScriptで操作できたりと、扱うメリットが多いので、これから急速に普及していく可能性があります。 また、Can I use…でも確認できますが、今ではほとんどのモダンブラウザがSVGをサポートしているので、互換性も他の最新技術ほど気にする必要がないのです。 今回は、SVG
"地味にスゴい"ってホント!? わかりやすくHTML5.1の追加された新機能を紹介
HTML5がリリースされて早2年。 HTML5のリリースによって、Webの世界も大きく前進しました。 シンプルなタグで書ける便利な機能がいくつも実装されただけではなく、1999年以来ずっとWebの技術を支えてきたHTML4.01が初めてメジャーアップデートを迎えたからで、あえてHTML5が登場してからは、「このサイトはHTML5で書かれています」と明示するホームページまで存在します。 そこで今回は、HTML5.1で採用された機能の中で特に注目すべき新機能をピックアップしてご紹介します。 補足 ありがたいことに次のHTMLのアップデートまで10年以上も待たなくてもいいようです。2010年10月、Webで使用される各種技術の標準化を推進する為に設立された標準化団体であるW3Cは、HTML5に残された課題を解決するためにHTML5.1の構想を組み立て始めました。最終的には、HTML5.1は、20
「誰がこんなネーミングにしたんだ……。」プログラミングのネーミングルールを決める時に参考にしたい情報まとめ
サイトのメンテナンスにおいてしばしばネックになるのは、どんなネーミング・構成で制御しているのか分からなくなってしまうことです。しっかりと基準に則った、誰がいつ見てもわかりやすいネーミングでコーディングしていくことは、非常に重要なことです。 今回は、プログラマーがネーミングを考える際に参考にしたいサイトを選んでご紹介いたします。 1. codic - プログラマーのためのネーミング辞書 https://codic.jp/ 様々なサイトに紹介され、「ネーミング」で検索しても上位に表示される素晴らしいツールです。例えば、Webサイトの背景に動画を設置する際に、class名をどうしようか悩んだとします。そこでcodicに「背景動画」と入力すれば「background_videos」と提案してくれます。提案されたネーミング以外にも、その他の候補も出てきます。 考える労力を省くことができるという点で優
ココだけ欲しい！Webデザインのパーツをまとめたギャラリーサイト36選
この記事は2015年10月22日に公開された記事を再編集したものです。 デザイン作業に慣れてくると、どうしても自分の癖が出てしまい、似たようなデザインばかりになってしまいがちです。特にWebデザインのパーツは、毎回同じようなデザインを作ってしまうことも少なくありません。しかし、自分が持っているアイデアだけでは、なかなか新しいデザインは浮かんでこないものです。 そこでオススメしたいのがギャラリーサイトです。その中でもパーツごとに収集したギャラリーサイトは、デザインの「部分」だけでも参考にすることができるため非常に便利です。デザインアイデアが欲しい時こそ、多くのヒントが詰まっている素材サイトを活用しましょう。 今回は、Webデザインのパーツをまとめたギャラリーサイトを36個まとめてご紹介します。 ※サイトによっては素材やソースコードなどを配布・掲載しているものもあります。ご利用の際は、必ず利用
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
