１．うずらフォント（手書きフォント系） ▼ぜんぶうずらフォントです。 手書きフリー日本語フォントはたくさんありますが、最近はこれがお気に入りです。 ゆるい感じが可愛らしい。 ちょうど下手すぎず、上手すぎずがちょうどいいんですよね！ このフォントの使いみち ダウンロードはこちらから ２．Noto Sans Japanese /a 源ノ角ゴシック（ゴシック太さ多数） GoogleとAdobeからこのフォントが発表された時、デザイナーは沸きました。 しかし思いません？ winならメイリオとかmacヒラギノとか最初から入っているフォントでいいよ！ ぼくも、そう思います！ あーでも、しかし１つだけこのフォントが便利な点があるんです。 それは 文字の太さの種類がある これが大事なんです。デザインを作る時に便利！ OSに最初に入ってるフォントは、太さの種類が２、３種類だと思います。 ボールドボタンで太く

メディアサイトやECサイトなど、ページを分ける必要があるときには、ページネーションのSEOも考える必要があります。最近ではめずらしくない（WPJもそうですね）無限スクロールや「続きを読む」の処理にもポイントがあります。 規模の大きいサイトや、小規模でも縦に長いコンテンツページのサイトを運営していると、おそらくある時点でページネーションを実装する必要が出てきます。コンテンツを複数ページに分けたいと考える状況はいくつか考えられます。一連の関連記事がある、検索結果で上位表示されるページがある、eコマースサイトで1つのカテゴリーに大量の商品がある、いくつかコメントスレッドが立ったディスカッションフォーラムがある場合などです。本記事では、SEO対策でページネーションを実装するための模範事例から、ページネーションでよく起こる問題とその解決方法について解説します。 ページネーションの模範例 ページネーシ

レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で！ 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも！アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ

CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませて…

なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま

公開前に知人に見せたら、読むのに20分もかかったわ！！ と、お叱りを受けましたｗ オススメのツールやWEBサービスということで50ほど紹介していますが、僕の使用感のほかに、ところどころ経験談的なものが入っています。そのあたり、読むのがめんどうな方は読み飛ばしていただければ幸いです。 2万文字近くあるので、お時間ある際にゆるりと読んでいただければと思います。 それではお楽しみ下さい！ サイト解析に使えるツール・サービス import.io Juicer Ptengine GTmetrix CLOUD FLARE wayback timemachine シミラーウェブ Open Site Explorer サクラサクLABO aguse Built with ディレクションに使えるツール・サービス ウェブチェッカー Cat Mdes maindmaister ひとりブレスト 関連キーワード取得

CSSプロパティの1つである display は、CSSレイアウトに用いるプロパティの中でも極めて重要なものです。よく使われているのは、 block や inline 、 none あたりでしょう。 table や inline-block も、今ではかなり一般的になってきたと言えます。一方、 flex は新たに登場したものです。きっとユーザに気に入られるでしょう。これはレイアウト用に特別に作られたdisplayプロパティです。さらには、この先、 grid がまもなく私たちの秘密兵器となるでしょう（現在、盛んに取り組まれています）。これもまた、レイアウトに特化したプロパティです。 本記事は、当初予定していたよりもずっと長くなりました。ご希望に応じて、自由にサブセクションに飛んでお読みいただければと思います。もし、お時間を割いて全体を読んでいただけるのでしたら、大変嬉しく思います???? 目

この記事は新しいサイトに移転しました。 約3秒後に自動的にリダイレクトします。 リダイレクトしない場合はこちらをクリックしてください。

2016/07/10に公開されたバージョン2.5.1では、（僕の環境では）モバイル登録できなくなりました。登録項目はあるのでおそらく不具合だと思います。もしかしたら、次のバージョンが出るまではモバイルでのキーワード登録はできないかも。 グループごとにキーワードを登録できる Serposcopeは、カテゴリごとにキーワードを分けて登録することができます。 以下のように、グループごとにキーワードを登録し、サイトも競合サイトとともに登録することで、他サイトの順位動向も見ることができます。 Serposcopeでは、このグループ化は必須なので、自然とキーワードなどが整理されます。 もちろんグループ機能はGRCでも利用できます。 GRCのグループ化は、後からでも変更できますし、手軽に設定できるので、使い勝手はこちらのほうが上かも。 サイト全体の順位変動具合を分かりやすく表示 Serposcopeは、

全体主義の象徴 前回の「ドン・キホーテは『進撃の巨人』の夢を見るか」に引用されたハンギョレの記事の見出し。なぜ「塩野七生」が入っているのですか。 鈴置：キル・ユンヒョン東京特派員が書いた「塩野七生、あるいは全体主義の誘惑」（5月27日、日本語版）のことですね。 オバマ（Barack Obama）大統領の広島訪問を論じたこの記事は「謝罪要求を口にさせない日本」を批判し「日本は全体主義に向かう」と警告しました。 キル・ユンヒョン特派員によれば「塩野七生」こそが、日本の全体主義を象徴します。だから見出しに入っているのです。 筆者は記事の冒頭で、塩野七生氏の著作を読破したと告白しています。しかし文末では、ソウルに戻ったらそれらの本はすべて片付ける、と書きました。 国の品位の差 どうしてですか。 鈴置：塩野七生氏が朝日新聞のインタビューに答え「無言で静かにオバマ大統領を迎えよう」と語ったからです。

【2017年3月31日】 いまやホームページは誰でも、もの凄く簡単に作れる。ホームページ作成サービスがあり、無料で始められるものもある。 正直なところ、個人の商店や中小規模の企業レベルならコレで十分なケース多い。 ホームページを作るための言語（HTML）やデザインの知識も全く要らない。キーボードを叩けて、マウスをクリックできれば十分だ。 この記事では、誰でも使える便利なホームページ作成サービスを紹介する。日本語対応で無料から始められるもののみに限る。 この記事の後半では、実際に無料で簡単にホームページを作る手順を解説する。実際に無料のサービスを使ってホームページを一つ作ってみたので、興味のある人はのぞいてみてほしい。 目次 目次 ビジネス用のホームページなら少し投資を ホームページ作成サービスを利用するときの注意点 グーペ BiND クラウド BASE（ベース） Jimdo（ジンドゥー）

「ちょっと〇〇君！これワイヤーフレームそのままじゃない！」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。 「ビジュアルを作る力」と「情報を理解・提案する力」 ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。 ビジュアルを作る力は幅広い表現の中から適切な手

Google検索順位１位を取るために使った方法は １．内部コンテンツをキーワードで最適化し、 ２．キーワードにおける評価が高いドメインの ３．「新規記事ページ」への ４．「リダイレクト（３０１）」 である。 これを行った一番の理由はリダイレクト元であるfreelifer.jpを旅行の専門サイトにしているからだ。ブログ、ブロガー関連のキーワードでの評価をこちらのサイト（bloglifer.net）へ流す目的で http://freelifer.jp/?p=1358 から http://www.bloglifer.net/entry/pro-blogger へリダイレクトを送った。 その結果として検索順位が１位になっている。 特定のキーワードを、特定の時間で１位を取る実験やってみる。５月３日に検索ボリューム月１万回以上の某キーワードで１位を取る。 現在は１０位で今までの最高位は９位。上手くいっ

どうも、まさとらん（@0310lan）です。 みなさんは、「YouTube」の動画をWebサイトやブログなどに貼り付けたことがあるでしょうか？ 「埋め込みタグ」をコピペするだけで、簡単に動画コンテンツを利用できるわけですが、最近は他にも多彩なコンテンツが埋め込めるようになっています。 そこで今回は、特にユニークなWebコンテンツを埋め込める無料サービスだけを厳選してみましたので、ぜひ参考にしてみてください！ ■リッチな情報を盛り込んだ「画像」を埋め込む！ 【 ThingLink 】 Webページに「画像」を挿入する機会は多いと思いますが、１枚の画像で伝えられるコトには限界があります。 そこで、「ThingLink 」を使うと、ごく普通の画像内に「動画」「音楽」「リンク」「テキスト」…など、さまざまな要素を埋め込むことが可能になるのです。 まずは、以下のサンプル画像をチェックしてみてください

2016年3月、社員旅行で訪れたタイ国ホアヒン、タイ王室ゆかりの地にて社員数十名が全裸で騒いだ件が株式会社DYMの評判としてネットで話題になりました。 タイの王室保養地で、日本人20人が全裸狂乱事件…国際問題に発展、タイ国内が騒然/ (魚拓) さて、この話題はどのように検索結果に表示されているでしょうか。 4/10と4/21に[DYM]と検索した結果を見比べてみましょう。 赤枠が事件を紹介した記事です。4/10に5枠あったものが2枠に減りました。 そのかわりに現れた表示がこちらです。 前回このブログでは、DMCA申請が悪評隠しに悪用されたと思われる事例をご紹介しました。 そして今回も本来クリエイターの著作権を守るためのDMCA(デジタルミレニアム著作権法)が、タイ国での騒動という株式会社DYMの評判に影響するのを隠そうと悪用されたものだと考えます。 この株式会社DYMは、ネット上での悪評隠

こんにちは！　メディア事業部マネージャーのたくです。 突然ですが、Google アナリティクスを使ったサイト解析に苦労していませんか？ アクセスログを解析することはもちろん、報告用のレポート作成に時間がかかることってよくありますよね。見ることができる指標がありすぎて迷ってしまったり、山のようなデータから問題点を探すことにも一苦労。どうすれば短時間でサイトの課題を見つけ、改善策を実行することができるのでしょうか。 そこで今回お話を伺ったのは、株式会社クリエイターズネクストで代表取締役を務める窪田望さん。アクセス解析の専門家である窪田さんに、アナリティクスを使った分析の進め方やポイントについて教えていただきました。 ▼目次 アナリティクス利用者の約60%は改善策を打てていない アナリティクスの鉄則は「インパクト・ファースト」 数値の「違和感」を見つけ出す感覚が改善スピードを上げる ペルソナ設定

『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day

仕事の傍ら、暇つぶしとかでwebアプリを構築したりするわけですが、どうにもUIセンスがなさすぎて、カッコイイサイトとかを参考に真似したりしても、なぜか自分でアレンジするととてつもなくダサくなる、ということを繰り返してきました。 で、もうこうなったら自分で考えずに、すべてライブラリに頼ろう！と思ってwebサイトを構築した時に使ったcssやjsのフレームワーク、ライブラリなんかを、簡単なコメント添えてまとめておこうと思います。 css自分で一切書かなくても、このぐらいのUIまではいけそうです。 フレームワーク Bootstrap ベースはtwitter bootstrapの恩恵に授かります。 GoogleMaterialDesignLiteも見た目はかっこいいんですが、色々コンポーネントがたりなかったりして、結局いくらか自分でデザインしないとどうにもならなくなる印象です。 jQuery 今更書