配色を考えやすくするための様々なルール ｜https://wp.yat-net.com/name
色は、見た人に対して、そのものの意味を伝えることができます。そのため、色の選択を誤ると正しい意味を伝えることができません。 色とは、デザインを行う上で欠かすことのできない要素であり、プロジェクトの成功にも大きく関わっているため、デザイナーにとっては非常に気を使う要素といえます。 世の中には、何万色という色が存在します。デザイナーは、その中からパターンを組み合わせ、最適なものを選択しなければなりません。 しかし、デザインには意味がある以上、そこにはルールが存在します。そのルールに沿って配色することで、デザイナーは正しい選択ができます。 今回は、配色を行うために知っておくべき、知識やルールを解説したいと思います。 色の色相環と虹 配色と自然の関係 色相、彩度、明度 色調（トーン） 色の役割分担 色の意味 色を選んでみる まとめ 参考文献 1.色の色相環と虹 色の相関を表すのに「色相環」というも
文章をデザインする – 段落や箇条書きをより読みやすくするために ｜https://wp.yat-net.com/name
文章を読み易くする為に段落を用いてレイアウトすることは非常に多く、いかに読みやすく、いかに見やすいかを考えて構成する必要がありますね。 1.段落の使い方 2.読みやすい改行位置 3.箇条書きについて 4.文章をデザインするという事 段落の使い方 このブログではある程度の長さで1段落を設定し、一つ一つのブロックが長過ぎないようにある程度の調節を心がけています。 しかし可読性や視認性の事を考えると当然これだけでは駄目ですよね。もっと考えるべき点があります。 今回はちょっとその辺りについて考えをまとめてみたいと思います。 読みやすい改行位置 まず文章を構成するにあたり、必ず考えるべきなのは改行の位置です。Webに限らず紙媒体でも同じで、どこで改行すれば読みやすいのか・見やすいのかを意識するのはとても大切な事ですよね。 基本的に改行は句読点位置で行う事。これが一番シンプルではないでしょうか？あと、
IAシンキングとは -information architecture- ｜https://wp.yat-net.com/name
2013年 04月 19日 IAシンキングとは -information architecture- カテゴリ： IAシンキング タグ：IAサイト構築サイト設計 サイトの設計、情報の整理、SEO、UI。Webサイトの構築時に考えるべきことはたくさんありますね。世のWebデザイナーの方やディレクターの方、インハウスの方など、色々な 役割の人がそれぞれの観点から情報を整理したり、競合サイトを調査したりと様々な事をしています。 しかしそれらを行うにあたって明確なフローが決まっているか？と言う割りとそうではなく、多くの人が意識的レベルでそのフローを行なっているのではないでしょうか？ それらのフローを意識レベルで行えるということは非常に素晴らしく、欠かすことが出来ないスキルであることは間違いありません。 ですが、プロジェクトに参加するメンバーのスキルやレベルは必ずしも一致しているとは限らない為、ひと
とりあえずJavaScriptを記述して動作を確認したいって時はFirefoxに搭載のスクラッチパッドが断然便利 ｜https://wp.yat-net.com/name
2013年 04月 05日 とりあえずJavaScriptを記述して動作を確認したいって時はFirefoxに搭載のスクラッチパッドが断然便利 カテゴリ： Firefox タグ：javascriptエディタデバッグ JavaScriptを記述出来るエディタは沢山あるんですが、「とりあえずソースを書いて試したい」って時はFirefoxに標準で付属しているScratchpad（スクラッチパッド）を使っています。 Scratchpad（スクラッチパッド） Firefox 6で搭載されたスクラッチパッド。使ってる人は結構居るかもしれませんが、まだ知らない人も居ると思うのでちょっと紹介しようと思いました。 Firefoxにはブラウジングする機能以外に開発者向けの機能が沢山備わっています。Scratchpad（スクラッチパッド）もその中の一つで、これはJavaScriptのソースを記述・実行・デバッグが
レイアウトが考えやすくなるデザインのルール ｜https://wp.yat-net.com/name
デザインには意味があります。物を配置するにしても、なぜそれを配置するのか？なぜその色味なのか？なぜそこに置くのか？など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真
フォントをもっと楽しめるKinetic typography（キネティック タイポグラフィ） の動画17本 ｜https://wp.yat-net.com/name
2013年 01月 16日 フォントをもっと楽しめるKinetic typography（キネティック タイポグラフィ） の動画17本 カテゴリ： Font タグ：FontTypography このブログもこの記事で300記事目になりました。1周間に1記事程のペースを目標に書いていますが、1000記事を目指そうと思うとあと何年掛かるんでしょうね。考えてもあまり意味が無いので考えるのは辞めましょう。 300記事目なので何を書こうか！って考えたんですけど、考えた所で自分のハードルを挙げるだけな気もするので、そういうことを考えるのも辞めて楽しく行きたいなと思います。 1.Kinetic typography（キネティック タイポグラフィ）とは 2.キネティック タイポグラフィを見てフォントを学ぶ 3.様々なキネティック タイポグラフィ Kinetic typography（キネティック タイポグ
有名なフォント12種類の紹介とフォントの基礎知識について - YATのBLOG
2013年 01月 09日 今さら聞けない？有名なフォント12種類の紹介とフォントの基礎知識について カテゴリ： Font タグ：Font 新年明けましておめでとうございます。今年も色々と挑戦する年にしたいのですが、一先ずブログをしっかり書くというのをベースにがんばります。 早いもので、このブログも気がついたら3年が過ぎ4年目に突入していました。立ちあげ当初は辞めないことを目標にしていましたが、続けることが大事だなと今でも思っています。皆様本年もよろしくお願いします。 今回は自分がよく使っているフォントをまとめました。他にも使っているフォントはもちろんあるんですが、基本的なフォントやWebベースで使えるフォントあたりを紹介しています。 1.フォントリスト 2.フォントの基本 3.考察 フォントリスト 欧文フォント 1.Arial 2.GEORGIA 3.Myriad 4.Verdana 5
11月は好きなブログを告白する月 36ブログをご紹介させて頂きます。 ｜https://wp.yat-net.com/name
2012年 11月 30日 11月は好きなブログを告白する月 36ブログをご紹介させて頂きます。 カテゴリ： Webサイト紹介 タグ：BLOG 11月の本当に末になってしまいましたが、11月は好きなブログを告白する月という事なので、僕もご紹介させていただこうと思います。項目ごとに分けたんですが、僕の観点で分けてるのでもしかするとこのブログはここじゃないってのがあるかもしれませんがそこはご了承ください。 1.写真・文具 2.Webデザイン 3.グラフィックデザイン・イラスト 4.UIデザイン、UX 5.コーディング 6.サーバー・インフラ 7.マーケティング・読み系 8.WordPress 9.SEO 10.最後に 写真・文具
使ってわずか10分でメインエディタを変えてしまったSublime Text （ST2）がめちゃめちゃ使いやすい件 ｜https://wp.yat-net.com/name
2012年 11月 21日 使ってわずか10分でメインエディタを変えてしまったSublime Text （ST2）がめちゃめちゃ使いやすい件 カテゴリ： PCツール タグ：エディタ 最近流行ってるsublime textというエディタですが僕も試しに使って10分ぐらいでメインエディタにしてしまいました。なんせ使いやすいです。 個人的にショートカットで作業効率がガンガン上がっていくのが非常に嬉しいですね。ちょっとそのあたりを紹介したいなと思います。 1.sublime textとは 2.作業効率を上げる便利なショートカットキー 3.マウス操作との連携で入力を支援 4.カスタマイズで更に便利に！プラグインに関して 5.その他便利な機能 6.参考文献 7.追記 sublime textとは windows,mac,linuxで動作するエディタです。テキストの編集やコーディングを早くするショートカ
コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利 ｜https://wp.yat-net.com/name
2012年 10月 31日 コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利 カテゴリ： Sass タグ：CodingSassScssコーディング効率化 \ CSSのメタ言語Sass（Scss）。これ使うと凄く便利でコーディングスピードが上がるんですが、これをより便利に使えるようにしたフレームワークのCompassがもの凄く便利なので記事にしました。赤い彗星みたいなタイトルになってますが、使いこなせばかなり早くなります。 1.Compassとは 2.インストール 3.初期設定 4.Sass（Scss）ファイルをCSSファイルに 5.実際に作る 6.参考文献 compassとは オープンソースのCSSオーサリングフレームワークです。Sassがベースになっており、mixinで予めベンダープレフィックスが定義されていたりと、Sassをより便利に使え
ユーザー体験とは？UX及びユーザビリティについての考察 ｜https://wp.yat-net.com/name
2012年 10月 12日 ユーザー体験とは？UX及びユーザビリティについての考察 カテゴリ： IAシンキング Webデザイン タグ：IAシンキングUXWebサイト構築ユーザビリティ Webに限ったことではありませんが、人が新たな物を利用するにはその使い方を学習する必要があります。 どんな優れた製品でも使い方が分からなければユーザはそれを使うことができません。それを避けるために各メーカーはマニュアルを用意したり、サポート出来る手段を用意しています。 ですが、多くのユーザーはマニュアルを読むより先にまず触ってみるという人が多いかと思います。マニュアル読むのって結構時間もかかるし、早く触りたい・使いたいという欲求が大きいからでしょうね。 であれば、なるべくマニュアルがなくても分かりやすいデザインであった方がユーザーにとって喜ばれるのでしょう。 1.ユーザー体験とは？ 2.ユーザー体験を無視した
様々なサイトナビゲーションとそれらの役割 ｜https://wp.yat-net.com/name
Webサイトの中身は情報量が多く広大になりがちです。その為「ユーザーが目的の情報へいかに迷うこと無くたどり着けるか」を考えることが非常に重要なことになってきます。それを解決するのがナビゲーションであり、 我々はWebサイトを構築する段階で様々なナビゲーションパターンから、場面場面に応じて必要な物を選定して配置する必要があります。 今回の記事ではその様々なナビゲーションにはどういうものがあり、それぞれどういう役割を担っているかを解説したいと思います。 1.ナビゲーションパターンについて 2.様々なナビゲーションタイプ 3.まとめ ナビゲーションパターンについて まず初めに、長谷川敦士氏がパターン分類した「7つの主に企業サイトで使われるナビゲーション」を見て行きましょう。 階層型ナビゲーション 機能ナビゲーション 関連ナビゲーション ダイレクトナビゲーション パンくずナビゲーション ステップナ
5つのサイトストラクチャ（Webサイト情報構造）を実際のサイトと照らしあわせて考える
2012年 08月 24日 5つのサイトストラクチャ（Webサイト情報構造）を実際のサイトと照らしあわせて考える カテゴリ： IAシンキング Webデザイン タグ：IAシンキングWebサイト構築 サイトストラクチャとはWebサイトの構造のことです。サイトストラクチャを考える際には、作るサイトの目的に合わせた設計が必要なのは言うまでもありません。では、その目的に合わせた設計とはどういうものでしょうか？それを考えていきたいと思います。 1.サイトストラクチャ（サイトの構造）パターンについて 2.5つのパターンの解説 3.サイトの全体像と部分的な構造 サイトストラクチャ（サイトの構造）パターンについて Webサイト制作にあたり、サイトの設計で多く採用されるものとして5つパターンがあります。 階層型分類構造 ファセット型構造 Web型構造 直線型構造 ハブ＆スポーク型構造 名称だけを見てもピンと来
Webサイト構築における、「情報の分類とコンテンツの理解」をECサイトで考えてみる。-IA シンキング- ｜https://wp.yat-net.com/name
2012年 07月 10日 Webサイト構築における、「情報の分類とコンテンツの理解」をECサイトで考えてみる。-IA シンキング- カテゴリ： IAシンキング Webデザイン タグ：IAシンキングWebサイト構築 Webサイトを制作していて非常に気を使う部分になる情報の分類。例えば商品やコンテンツの分類で、あまりに関係ない分類をしてしまうとユーザーはそれを見つけにくくなり、本来であればユーザーの要望にマッチしたものを提供出来るのにユーザーを逃す事になってしまいます。そうならない為にもWebサイトにおける情報やコンテンツの分類は分かりやすくする事が非常に大切な事になります。 1.情報の整理について「LATCH法」 2.分類に迷ったら 3.必要最低限のコンテンツ、必要不可欠なコンテンツ 4.情報の分類とコンテンツの理解がもたらすもの 1.情報の整理について「LATCH法」 情報の整理に置いて
ファンの心をがっちり掴むECサイト「スイーツサイト」厳選8サイトご紹介 ｜https://wp.yat-net.com/name
僕は甘いもの、特にケーキが好きなんですが、最近Webサイトが凄く独創的なショップサイトを目にすることが多く、行ってみたいと思うお店が多くてやばいです。 販売しているケーキ屋やスイーツが美味しいのは当然として、Webサイトやお店にストーリーだったり、特出したデザインだったりといったものが見えると、どうしても行ってみたい！って強く思ってしまうんですよね。 素敵なサイトの紹介 1.素敵なサイトの紹介 今回はそんな素敵なサイトをまとめて紹介したいと思います。ツイッターで流れてたり、有名なお店だったりするので、知っているサイトが殆どかもしれませんが、まとめとしてストックしておきます。他にもあったら是非教えて下さい！ ANTIQUE -アンティーク- パンを販売していますが、ドーナツも販売しているのでスイーツというカテゴリに入れちゃいました。スイーツのサイトで一番気に入っているサイトです。大阪にも店舗
VPSって一体なんだろう？VPSの事を調べてみた - YATのBlog
VPSって一体どういうものなのかを図解入りで解説しました。参考になるサイトやツールの紹介もしています。最近低価格帯で提供されているVPSが人気で良く耳にします。 中でも周りのブロガーさん達にはさくらVPSが人気なようで、僕も当ブログをさくらVPSに引越ししようと色々と調べてました。 しかし、このVPSって一体何でしょう？今回はVPSについて色々調べた事をさくらVPSを基準にしてまとめておきたいと思います。 1.VPSとは 2.何が出来るの？ 3.必要なもの 4.さくらVPSについて 5.まとめ 1.VPSとは VPSとはバーチャル・プライベート・サーバ (Virtual private server) の略で、1台のコンピュータ上に複数の仮想サーバーを起動するソフトウェアの事を指します。 レンタルサーバーが提供しているVPSはこれを採用している為、我々利用者は共用サーバーでありながら1
フリーイラストサイト12点。商用利用OK・著作権表示不要・無料。 ｜https://wp.yat-net.com/name
2012年 04月 20日 フリーイラストサイト12点。商用利用OK・著作権表示不要・無料。 カテゴリ： フリー素材 タグ：イラストフリー素材まとめ作成支援ツール 会社内の資料を作成する際やブログを書く際にイラストが欲しい！と思うことは多々あるんですが、ひとつひとつイラストを書いてると膨大な時間が掛かってしまいあまり現実的では無いかなと思います。 なので、ちょっとフリー素材として使えるイラストを公開してくれているサイトをご紹介すると共に、シェアさせて頂こうと思います。 こういったものをフリーで公開していただけるのは非常に有難く頭が上がりませんね。尚、商用利用可能で、著作権表記が出来るだけ不要のものをご紹介させて頂きますがWeb上で公開したりする際は念の為、各サイトのポリシーや利用規約をご確認下さい。
脳内にある情報を視覚化することで情報整理をするマインドマップ ｜https://wp.yat-net.com/name
マインドマップというものをご存知でしょうか？wikipediaで調べると出てきますが意味的には下記のとおりです。 マインドマップはトニー・ブザン(Tony Buzan)が提唱した思考・発想法の一つである。あるいは、私たちの頭の中で起こっていることを見えるようにした思考ツールのこと。 マインドマップ wikipedia これだけ見ると凄くおおごとのように聞こえますが、特別凄い装置が必要とかそういうことではありません。誰でも簡単に行うことが出来ます。 1.マインドマップを行うメリット 2.マインドマップの書き方。 3.他人のマインドマップが見れる「マインドマップアーカイブ」 4.他人のマインドマップを見れることのメリット 1.マインドマップを行うメリット 上記でも少し触れましたがマインドマップとは脳内に有る概念を視覚化していくことで情報の整理や思考の展開を行うことです。視覚化の方法は ある概念
コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 ｜https://wp.yat-net.com/name
2012年 01月 12日 コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 カテゴリ： Sass タグ：CodingSassコーディング効率化 CSSのメタ言語として登場したSass。去年から認知はしていたのですが中々手を出しておらず、年が開けて「やってみよう！」と思い起こして使って見ました。 Index 1.Sassとは 2.インストール 3.SassファイルをCSSファイルに 4.実際に作る 5.参考文献 1.Sassとは Sassがなんなのか知らない人も居ると思うので簡単に説明すると、CSSファイルを作成するために扱うプログラムのようなもので、直接CSSファイルを作成するのではなく、CSSよりもシンプル且つ構造化した記述でSCSSというファイルを作成し、そのファイルからCSSファイルに変換（コンパイル）します。 コンパイルされたフ
食品販売サイトで重要な見るだけで食べたくなる質感「シズル感」 ｜https://wp.yat-net.com/name
シズル感のある写真を使ったECサイトでは通常の写真よりも購買意欲が注がれます。実際僕自身過去にECサイトで販売していて売れなかった商品も、写真を撮影し直すことで売れたという経験もあります。 それを体験しているからこそ、僕自身ECサイトで写真は大事だと考えています。飲食関係に至ってはとくにこのシズル感が出ているか否かは非常に大きなポイントになってきます。 同じ食材を販売するにしても、訪問したユーザーの多くは「美味しそう！」と感じるから買おうと思うのであり、ただ安いからという理由で買うわけではありません。 ただ安いから買うというのは、その商品をすでに知っているから買うのであって、まだそれを知らない人からすれば安いという理由だけだと「なぜ安いのか？」という考えを引き起こす事になり得ます。 ユーザーが商品を見て、買いたいと思うまでにいかに余計なことを考えさせないか。これは購買意欲を購買につなげる大
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
