多くの Web デザイナーがページのデザインカンプを Photoshop を使って制作しています。デザインが固まるとカンプは開発者に渡りコードを書く作業が始まります。カンプからコードへ、この作業を強力にサポートし飛躍的に生産性を向上させる夢のツールが Extract という名称で Creative Cloud サービスに組み込まれました。これは以前ご紹介した実験的プロジェクト Project Parfait (プロジェクトパフェ) がプレビュー版として Creaitve Cloud Files に組み込まれたものです。 使うのはカンタン、クラウドストレージに PSD を置くだけ Extract を使うのはとてもカンタン、特に Creative Cloud のストレージサービス Files をご利用中の方は何の準備も要りません〜ただ PSD ファイルをストレージに置くだけです! あとはブラウ

角丸のパネルに角丸のパネルを重ねたデザインで、それぞれの角丸はどのくらいにしていますか？ 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。 こういった時の一つの目安として、バランスが良い角丸のデザイン方法を紹介します。 しっかりとした数値で2つの角丸をデザインすることができます。 Quick Tip: Rounded Corners Done Right 見た目的になんとなくデザインではなく、親と子の角丸の中心点を揃えてカーブを描きます。こうすることで、2つの角丸は非常にバランスのとれたものになります。

モバイルサイトのデザインデータなど、縦長の画像を自動分割して印刷用に1枚にまとめるツールを作成しました。 データのアップロード等も不要ですので、機密性の高いデータを印刷する場合でも安心して無料でお使いいただけます！ 明けましておめでとうございます。本年もWebNAUTをよろしくお願い致します。私の新年1本目の記事は特に正月らしい内容ではありませんが、Web制作の各場面で使える「痒い所に手が届く」ツールを紹介させていただきます。 デザイン確認時のよくあるやりとり ディレクター： ここでディレクターさんはデザインの確認と指示出しをどのように行うでしょうか？ デスクトップ上で修正指示を書き込むようなアプリも幾つかありますが、やはり見やすさや書き込みのしやすさでは紙に印刷して手書きで指示を書く事が多いと思います。 その際、縦に長い画像を印刷しようとすると一般的なアプリではこのようになってしまいます

META Robotsタグ活用完全ガイド noindex nofollow noarchive など まとめ robots meta タグの意味と用法まとめ noindex, nofollow, noarchive, nosnippet, noimageindex などの主要なMETAタグの利用方法と注意事項など。 公開日時：2015年01月08日 12:18 検索エンジンのクローラの動作や行動を制御するためのロボット排除プロトコル（REP、Robots Exclusion Protocol）の中でも、META robots タグを用いた方法の紹介です。2015年1月1日時点でサポートされているものを紹介しています。 nositelinkssearchbox などSEO担当者に関連するMETA要素も含んでいます。 以下、基本的な知識と、noindex, nofollow, nositeli

CSSを使って、3本線のメニューボタンを開閉にあわせて変化させる方法を紹介します。先日作ったWebギャラリーサイトでも使っている方法です。 3本線のメニューはアイコン型のWebフォントを使っている人も多いと思いますが、CSSで作成すると動きをつけることもできるので楽しいです。 サンプルを用意していますのでご覧ください。 では、HTMLから説明します。 HTML a要素がサークルで、span要素が3本線になります。 <a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a> span要素を3つ並べて3本線を作る場合もありますが、個人的には擬似要素を使って1つで表示したいです。 CSS 続いてCSSです。最初に全部載せて、後で個別に解説します。 #panel-btn{ display: inline-block; posit

はじめまして。株式会社スクーの田中伶です。 皆さん、お正月はどうでしたか？　私はおめでたいムードの中、年賀状の隅に書いてみた羊があまりにも残念で、絶望的な気持ちになっておりました。 そんな私でも！ 可愛くてネタになるイラストをさくっと描けるようになってみたい！ ということで今回は、schoo（スクー）WEB-campusで実際に開講された授業「クスッと笑えるイラストのアイデア発想法と描き方」から、イラストアイデアの発想法をまとめてお届けしたいと思います。 人物紹介：りゃんよ先生 イラストレーター、漫画家。 1987年生まれ。大人のオモチャを作ろうと某玩具会社に就職するが、子供のオモチャ会社だったので退職。その後、フリーのイラストレーターになり、４コマブログで大人のオモチャを頻出させている。カワいくてコミカルなイラストから、女子の本音たっぷりの４コママンガまで、幅広く活動中。 りゃんよ先生プ

「良質なコンテンツ」って？ 「検索に強い（検索上位に表示される）コンテンツ」とは何でしょうか？ 今なら検索エンジンが重視している「良質なコンテンツであること」という答えが返ってくるでしょう。 では、「良質なコンテンツ」とは何でしょうか？ これも今なら「ユーザーにとって有益なコンテンツ」という答えが返ってくるでしょう。 この「ユーザーにとって有益なコンテンツ」というのがとても難しいものです。 検索順位は検索エンジンのアルゴリズムが決めることとはいえ、本当の評価を決めるユーザーに至っては価値観、判断基準などは人によって違うからです。 ですが一概には言えないとしても、「それ（価値観、判断基準）を決めるものは何か」と考えれば答えに近づくことは出来ます。 気づきを得る、理解、納得、更に考察を喚起する、何かしらの行動を起こしたくなる・・・etc 情報を与えるだけでなく、上記のような「ユーザーエクスペリ

「icono」は、画像を使用せずに擬似要素や様々なプロパティを使用してCSSのみでアイコンを表現したスタイルシートです。 使い方も簡単で必要なファイルを読み込んでクラスを指定するだけで表示させることができ、CSSなのでカラー変更なども容易にできます。 アイコンは上のイメージのような見栄えで用意されており、これら全100種類のアイコンをCSSのみを使用して実装することができます。 使い方は必要なCSSを<link rel="stylesheet" href="icono.min.css">で読み込み、あとは要素に表示させたいアイコンのクラスを記述するだけで簡単に実装できます。 どのクラスでどのアイコンを表示させられるかはデモ画面で確認することができ、各アイコンをクリックすると表示される.icono-xxxをクラスとして各要素に記述していきます。 デモではi要素を使用していますが、下記のように

WordPress SEO は「習うより慣れろ」で学習スピードを加速できる。今回は「WordPress SEO 基本カスタマイズの７ステップ」を画像解説するので、実際に自分で試して欲しい。 なお、このブログ記事では、読者の使用する WordPress テーマを制限したりはしない。基本カスタマイズを理解すれば、気に入ったデザインの WordPress テーマを「読者自身」で SEO に強いテンプレートへと生まれ変えさせることができるからだ。 1. スマートフォン表示に対応したテーマを選択する僕のサイトを訪れるユーザーも「過半数」が、モバイルからアクセスしてくる。またサイトによっては、モバイル端末のアクセスが「２／３」に近いこともある。僕は１年ほど前にWeb サイトを作るようになったが、当時からレスポンシブレイアウトを採用してきた。 ３～４年前までは「ユーザーエージェント」を判定し、モバイルサ

色を使いすぎない 以前に書いた「ポータルサイトのデザインをする時に意識したこと5つ」という記事でも触れましたが、今回も特に気をつけました。 ポータルサイトは一画面に表示される情報が多いです。文字はもちろん、画像の量が多くなります。サイトによってはバナー広告もあるので、それらの色に加えて、サイト自体の色もカラフルだと、目が疲れてしまいます。 そのため、色数を極力おさえることでサムネイル画像やタイトルに注目が集まるよう心がけました。そうすることで、ユーザーは情報を探しやすくなり、記事を読む事に集中できます。 逆に、色がゴチャゴチャしてどこを見たらいいのかわからない状態になると、ユーザーの離脱を招くことにもなるため注意が必要です。 選択肢は4つ程度にとどめる 今回のリニューアルにあたり、ポータルサイト内の選択肢を極力4つ程度にとどめる工夫をしました。その理由についてはふたつの心理学が関係していま