リアルな表現が素敵なスキュアモーフィックデザインに関する考察 ｜https://wp.yat-net.com/name
仲良くして頂いているブログ maka-veli.comで書かれていた「そろそろグラフィックリッチなメタファ、スキュアモーフィックとか楽しいコラージュも欲しくなってきた 」を読んでいて、スキュアモーフィックについてもうちょっと見たくなったので僕も記事にしてみます。 1.スキュアモーフィックデザインとは？ 2.スキュアモーフィックデザインとフラットデザインの違い 3.スキュアモーフィックデザインのメリットとデメリット 4.様々なスキュアモーフィックデザイン 5.最後に 1.スキュアモーフィックデザインとは？ まず、スキュアモーフィックデザインっていう言葉をご存知でしょうか？ スキュアモーフィック、スキュアモーフィズムといった言い方がされますが、デザイナーさんなら馴染みのある言葉かもしれません。簡単に説明するとユーザーインターフェース（UI）において、リアルに存在する物質、質感に近づけたデザイン
配色を考えやすくするための様々なルール ｜https://wp.yat-net.com/name
色は、見た人に対して、そのものの意味を伝えることができます。そのため、色の選択を誤ると正しい意味を伝えることができません。 色とは、デザインを行う上で欠かすことのできない要素であり、プロジェクトの成功にも大きく関わっているため、デザイナーにとっては非常に気を使う要素といえます。 世の中には、何万色という色が存在します。デザイナーは、その中からパターンを組み合わせ、最適なものを選択しなければなりません。 しかし、デザインには意味がある以上、そこにはルールが存在します。そのルールに沿って配色することで、デザイナーは正しい選択ができます。 今回は、配色を行うために知っておくべき、知識やルールを解説したいと思います。 色の色相環と虹 配色と自然の関係 色相、彩度、明度 色調（トーン） 色の役割分担 色の意味 色を選んでみる まとめ 参考文献 1.色の色相環と虹 色の相関を表すのに「色相環」というも
IAシンキングとは -information architecture- ｜https://wp.yat-net.com/name
2013年 04月 19日 IAシンキングとは -information architecture- カテゴリ： IAシンキング タグ：IAサイト構築サイト設計 サイトの設計、情報の整理、SEO、UI。Webサイトの構築時に考えるべきことはたくさんありますね。世のWebデザイナーの方やディレクターの方、インハウスの方など、色々な 役割の人がそれぞれの観点から情報を整理したり、競合サイトを調査したりと様々な事をしています。 しかしそれらを行うにあたって明確なフローが決まっているか？と言う割りとそうではなく、多くの人が意識的レベルでそのフローを行なっているのではないでしょうか？ それらのフローを意識レベルで行えるということは非常に素晴らしく、欠かすことが出来ないスキルであることは間違いありません。 ですが、プロジェクトに参加するメンバーのスキルやレベルは必ずしも一致しているとは限らない為、ひと
レイアウトが考えやすくなるデザインのルール ｜https://wp.yat-net.com/name
デザインには意味があります。物を配置するにしても、なぜそれを配置するのか？なぜその色味なのか？なぜそこに置くのか？など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真
デザイナーでも使うと便利なバージョン管理システムGitの勉強会に参加しました ｜https://wp.yat-net.com/name
2013年 02月 05日 デザイナーでも使うと便利なバージョン管理システムGitの勉強会に参加しました カテゴリ： Git タグ：Git この週末にGitの勉強会を開いてもらって基礎的なところから教えてもらいました。これまで興味はあったけど全く何も知らなかったので、いろいろ詳しく教えて頂きました。 1.Gitとは？ 2.用語解説 3.実際に使ってみる。msysgit 4.参考文献 Gitとは？ 分散型バージョン管理システムの一つです。ファイルの更新状態を好きなタイミングで保存しておくことが出来、好きなタイミングで保存している状態へ戻したり、編集した箇所の差分を表示したりする事が出来ます。 また、プロジェクトを複数人で進行している場合に起こりうる、古いファイルでの最新ファイルの上書きといったトラブルについても、Gitを利用すればエラーが帰ってくるため避けやすくなります。 尚、Gitと聞くと
5つのサイトストラクチャ（Webサイト情報構造）を実際のサイトと照らしあわせて考える
2012年 08月 24日 5つのサイトストラクチャ（Webサイト情報構造）を実際のサイトと照らしあわせて考える カテゴリ： IAシンキング Webデザイン タグ：IAシンキングWebサイト構築 サイトストラクチャとはWebサイトの構造のことです。サイトストラクチャを考える際には、作るサイトの目的に合わせた設計が必要なのは言うまでもありません。では、その目的に合わせた設計とはどういうものでしょうか？それを考えていきたいと思います。 1.サイトストラクチャ（サイトの構造）パターンについて 2.5つのパターンの解説 3.サイトの全体像と部分的な構造 サイトストラクチャ（サイトの構造）パターンについて Webサイト制作にあたり、サイトの設計で多く採用されるものとして5つパターンがあります。 階層型分類構造 ファセット型構造 Web型構造 直線型構造 ハブ＆スポーク型構造 名称だけを見てもピンと来
デザインする上で要素を目立たせるという事 ｜https://wp.yat-net.com/name
デザインやコンテンツ制作の打ち合わせをしていると必ず出てくる「目立たせる」という行為。 人によって「赤くして」とか「大きくして」と言った抽象的な言葉で表現されますが、僕ら制作者はその言葉をそのままの意味で捉えるわけには行けません。 何故なら、依頼者が何か目的があってそこを赤くする必要がある、大きくする必要があるならばそれを取り入れば良いです。ですが、その目的がその要素を目立たせたいという場合では話が変わってきます。 そうなると、本来の目的は「目立たせること」であって、決して赤くすることや大きくすることが目的では無いため、実際に赤くしたり、要素を大きくしても目立たなければ目的が達成されず満足されることは無いでしょう。 赤くして欲しい、大きくして欲しいと言うのは、依頼した人の中にある目立たせる事に直結したイメージである場合が多いので、実際に何を望んでいるのかを読み取ることが大事です。 1.要所
脳内にある情報を視覚化することで情報整理をするマインドマップ ｜https://wp.yat-net.com/name
マインドマップというものをご存知でしょうか？wikipediaで調べると出てきますが意味的には下記のとおりです。 マインドマップはトニー・ブザン(Tony Buzan)が提唱した思考・発想法の一つである。あるいは、私たちの頭の中で起こっていることを見えるようにした思考ツールのこと。 マインドマップ wikipedia これだけ見ると凄くおおごとのように聞こえますが、特別凄い装置が必要とかそういうことではありません。誰でも簡単に行うことが出来ます。 1.マインドマップを行うメリット 2.マインドマップの書き方。 3.他人のマインドマップが見れる「マインドマップアーカイブ」 4.他人のマインドマップを見れることのメリット 1.マインドマップを行うメリット 上記でも少し触れましたがマインドマップとは脳内に有る概念を視覚化していくことで情報の整理や思考の展開を行うことです。視覚化の方法は ある概念
売れるECサイト・ネットショップにする為に必要な事 - YATのBlog
インターネット上には沢山のECサイトが存在します。その中には当然「売れるサイト」と言われるサイトがありますし、サイトを立ち上げるなら無論皆さんはこれを目指すと思います。 では、売れるサイトを作るにはどうすればいいのでしょうか？ Index 1.売れるサイトに必要なこと 2.他のサイトとの差別化 3.最も大事なこと 1.売れるサイトに必要なこと そもそも売れるサイトとはどういうことでしょう？アクセス数が沢山あって、月に数千万円売れれば売れるサイトでしょうか？それは確かに売れるサイトと呼べるかもしれませんが、もしかするとそのサイトは運営側にとって離脱率や直帰率がまだまだ高く、また、数千万円売れていても赤字で売れるサイトととは呼べないかもしれません。 僕自身が考える売れるサイトとはユーザーが買いたくなるサイトを指すのではないか？と考えます。訪問者数が少なくても「買いたい」と思うユーザーが沢山入れ
食品販売サイトで重要な見るだけで食べたくなる質感「シズル感」 ｜https://wp.yat-net.com/name
シズル感のある写真を使ったECサイトでは通常の写真よりも購買意欲が注がれます。実際僕自身過去にECサイトで販売していて売れなかった商品も、写真を撮影し直すことで売れたという経験もあります。 それを体験しているからこそ、僕自身ECサイトで写真は大事だと考えています。飲食関係に至ってはとくにこのシズル感が出ているか否かは非常に大きなポイントになってきます。 同じ食材を販売するにしても、訪問したユーザーの多くは「美味しそう！」と感じるから買おうと思うのであり、ただ安いからという理由で買うわけではありません。 ただ安いから買うというのは、その商品をすでに知っているから買うのであって、まだそれを知らない人からすれば安いという理由だけだと「なぜ安いのか？」という考えを引き起こす事になり得ます。 ユーザーが商品を見て、買いたいと思うまでにいかに余計なことを考えさせないか。これは購買意欲を購買につなげる大
WEBデザイナーを目指す人へお勧めしたい記事・サイトまとめ ｜https://wp.yat-net.com/name
最近僕の周りでWEBデザインの勉強やコーディングの勉強を始める人が多く、そんな方々向けに読んで欲しい、見て欲しいサイトをまとめる機会があったのでブログにポストします。 ブログに置いておけばこれから先また誰かに伝える機会があってもURL一つで教えれるので便利ですよね。 Index 1.WEBデザイン全般 2.色彩・配色 3.レイアウト 4.ユーザビリティ 5.文字・文章 6.フォント 7.コーディング 8.著作権 9.グラフィックツール関係 10.チュートリアル等 1.WEBデザイン全般 [連載]Webデザイン入門（1日目）：Stocker.jp [連載]Webデザイン入門（2:スケッチしよう）：Stocker.jp [連載]Webデザイン入門（3:光とボタン）：Stocker.jp サンプルデザインでわかりやすく見る。プロデザイナーが使うセオリー10のこと。：MAKA-VELI.COM W
Web制作における文章の可読性について考える ｜https://wp.yat-net.com/name
ブログにしてもサイトにしても同じ事が言えますが、サイトのコンテンツで一番読むのは文章です。なので我々作り手も文章の可読性に関してはしっかり考えたいなというところです。 Index 1.文章の可読性とは？ 2.文章のブロック・段落 3.行間 4.余白 5.テンポ・リズム 6.フォントについて 1.文章の可読性とは？ 当たり前なことですが文章の可読性とはつまり「読みやすさ」です。文字が小さすぎたり、背景色に近い文字だったりすると当然可読性は落ちますね。 コンテンツに記述されていることが優れていても、文章が読みづらそうといった先入観や、読んでいて読みづらいという認識を持つとそのサイトに対してどう思うでしょうか？ 文字のサイズが小さいだけならブラウザのサイズを変更して読んでくれるかも知れませんが、他のサイトへ離脱してしまう可能性は十分に考えられます。人はストレスを感じることを嫌がりますのでよっぽど
SEOで重要視されるオーソリティとは？ -検索上位に食い込む鍵- ｜https://wp.yat-net.com/name
2011年 09月 28日 SEOで重要視されるオーソリティとは？ -検索上位に食い込む鍵- カテゴリ： SEO タグ：SEOオーソリティ 最近よく耳にするようになったオーソリティという言葉。SEOをやってる人なら大体の人が耳にした事がある、もしくは良く耳にするのではないでしょうか？ しかし制作会社で働くWEBデザイナーさんやコーダーさん、またインハウスのWEB担当者さんだとその言葉を知らない人もいると思います。一度オーソリティが何なのか、SEOにとってどういう関連性があるのかを解説したいと思います。 Index 1.オーソリティとは 2.SEOにおけるオーソリティの重要性 3.オーソリティスコアとは 4.ソーシャルアカウントのオーソリティ オーソリティとは オーソリティ：訳・・・権威 直訳するとこういう意味になります。では、権威とはなんでしょう？ 権威とは：国語辞典引用 他の者を服従させ
女性らしいデザインに使える、エレガントな植物のphotoshopブラシ。つるを中心に花など70種・1141本。 - YATのBlog
2011年 09月 06日 女性らしいデザインに使える、エレガントな植物のphotoshopブラシ。つるを中心に花など70種・1141本。 カテゴリ： ブラシ タグ：Photoshopswirlブラシ花 植物のつるをメインにしたデザインを良く見かけるんですが、個人的にも好きでブラシを集めてみました。それに関連して花も少し。 はじめの頃「つる」って検索しても「弦」って検索してもなかなか検索出来なかったんですけど、「swirl」ってやれば検索できるって非常に感動した覚えがあります。 これらを利用したデザインはエレガントさ、女性らしさを表現するのに最適ではないでしょうか？一般的には化粧品や美容室、ファッションサイトなどの女性向けのサイトで特に活用されるかと思います。 Photoshop ブラシ
ブログを運営している上でインストールしている全プラグイン20個 [WordPress] ｜https://wp.yat-net.com/name
2011年 08月 29日 ブログを運営している上でインストールしている全プラグイン20個 [WordPress] カテゴリ： WordPress タグ：WordPressWordPressプラグイン ブログをリニューアルしました。それに伴ってプラグインを整理したのですが、「ん？これなんだっけ？」ってのが結構あったので、後々の事考えてインストールしているプラグインを書き留めておきます。結構便利なものも多いので今からwordpressをやろうと考えてる人には役に立つかと思います。 尚、紹介する順番はアルファベット順となっております。（管理画面がアルファベット順な為） Akismet http://wpdocs.sourceforge.jp/プラグイン/Akismet コメント内容をチェックするスパム対策プラグインです。結構な数のスパムコメントが入ってくるので重宝しています。 Another
![ブログを運営している上でインストールしている全プラグイン20個 [WordPress] ｜https://wp.yat-net.com/name](https://cdn-ak-scissors.b.st-hatena.com/image/square/c6ea928f5e1876a88c89ea38311e1848fe38b09a/height=288;version=1;width=512/https%3A%2F%2Fwp.yat-net.com%2Fyatblog%2Fwp-content%2Fuploads%2F2011%2F08%2Fwordpressplugin_00-1.jpg)
HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識～活用まで ｜https://wp.yat-net.com/name
2011年 07月 11日 HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識～活用まで カテゴリ： CSS3 HTML HTMLとCSS タグ：CodingCSS3ジェネレーター作成支援ツール 現状HTML5とCSS3を利用したサイトの構築は自分の仕事上では出てきそうにないのですが、そうは言っても何も情報を収集しないわけにも行かないのでブックマークは当然しています。しかし、ただ単に貯めてるだけだといざという時活用出来ないので、一度ブログに書き留めておこうと思います。 html5 現状深く調べておらずリファレンスやタグ辞典的なものを収集しています。最近友人のクロ（@CROO1379）が色々情報を収集してサイトを構築しており、リファレンス的な意味ではかなり拾えそうな感じになっています。
見せたいコンテンツを見てもらう手段をユーザビリティの観点から考える ｜https://wp.yat-net.com/name
訪問してくるユーザーに対して見て欲しいコンテンツが合致していると、当然そのコンテンツを見てもらえる確率は非常に高くなります。しかしそれを上手く伝えることが出来ていなければそのユーザーを逃してしまうことになります。そういったユーザーを取りこぼさないために出来る簡単な工夫を考えてみましょう。 まず、初めて訪問したユーザーはどう行った行動を起こすでしょうか？ サイトのトップページにほしい情報や商品がファーストインプレッションの中に収まっていれば高い確率でそのバナーをクリックしてくれます。 例えばソファーベッドを探しているユーザーに対して、最初に表示される領域にソファーベッドのバナーがあると視線はここに行きやすい為、クリックされる可能性が上がる。 しかし、ここにソファーベッドがない場合はどうなるでしょうか？恐らく多くのユーザーはページの下部へ進んでいくことになるでしょう。しかし、下へスクロールする
WEB集客について、失敗しないリスティング広告のために考えるべきこと ｜https://wp.yat-net.com/name
2011年 06月 28日 WEB集客について、失敗しないリスティング広告のために考えるべきこと カテゴリ： EC SEM タグ：サイト運営マーケティングリスティング サイト運営を行う上で集客というのは非常に重要なものです。 WEBサイトは公開すれば誰でも見れるようになる媒体ですが、見てもらうには当然そのサイトを知ってもらう必要があります。 現状WEBの集客としてはSEOを含んだSEM、メールマガジン、ソーシャルネットワーク、アフィリエイトなどが主流かと思いますが、今回はSEMに分類されるリスティング広告の話しを書きたいと思います。 リスティング広告とは そもそもリスティング広告は皆さんご存知のとおり指定したキーワードに対して「露出したいページに対するリンク広告」を表示させる仕組みです。 ユーザーが指定したキーワードを検索エンジン等で検索した際に、掲載している広告をクリックした場合、ユーザ
Webサイトを製作する際に他のサイトを参考にする事の意味と、今すぐ使えるWEBデザインデータベースサイト厳選20サイトの紹介 ｜https://wp.yat-net.com/name
2011年 04月 15日 Webサイトを製作する際に他のサイトを参考にする事の意味と、今すぐ使えるWEBデザインデータベースサイト厳選20サイトの紹介 カテゴリ： Webサイト紹介 タグ：ギャラリーサイトデザイン作成まとめ サイト制作するうえで参考したり、刺激したりするのに利用するのはやはり他のサイト。これをまとめたWEBデザインデータベースが多数存在していますが、自分が利用しているサイトをシェアしたいと思います。知ってるサイトも複数あるかと思いますがそれはやはりそれだけ有名なサイトということですよね。 デザインを参考するとは そもそもWEBデザインでもそれ以外でも同じことが言えますが、自分の知識のなかの引き出しから物を作るにはかなり限度があります。大きな引き出しには違い有りませんが、どうしても自分の趣旨思考に偏ってしまったり、クライアントの要望するものに詳しくなかったりと言うことが多々
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
