配色を考えやすくするための様々なルール ｜https://wp.yat-net.com/name
色は、見た人に対して、そのものの意味を伝えることができます。そのため、色の選択を誤ると正しい意味を伝えることができません。 色とは、デザインを行う上で欠かすことのできない要素であり、プロジェクトの成功にも大きく関わっているため、デザイナーにとっては非常に気を使う要素といえます。 世の中には、何万色という色が存在します。デザイナーは、その中からパターンを組み合わせ、最適なものを選択しなければなりません。 しかし、デザインには意味がある以上、そこにはルールが存在します。そのルールに沿って配色することで、デザイナーは正しい選択ができます。 今回は、配色を行うために知っておくべき、知識やルールを解説したいと思います。 色の色相環と虹 配色と自然の関係 色相、彩度、明度 色調（トーン） 色の役割分担 色の意味 色を選んでみる まとめ 参考文献 1.色の色相環と虹 色の相関を表すのに「色相環」というも
GitHubを使ってみよう！導入と簡単な流れ、よく使うコマンドなど。 ｜https://wp.yat-net.com/name
2013年 10月 24日 GitHubを使ってみよう！導入と簡単な流れ、よく使うコマンドなど。 カテゴリ： Git タグ：GitGitHub GitHubを覚えよう覚えようと思ってなかなか手をつけてこなかったので、そろそろ本腰入れて使おうと色々やってみたのでまとめておきます。 1.GitHubとは？ 2.GitHubを使えるようにする 3.Git及びGitHubでよく使うコマンド一覧 GitHubとは？ github ソースファイルのバージョン管理システムにGitというものがあります。 Gitはリポジトリ（管理保存場所）先として、ローカル、もしくはリモートを選択出来るのですが、GitHubはそのリモート先にあたるもので、プロジェクトの管理をWeb上で行うことが出来るサービスです。 GitHubは無料で利用出来るプランも用意されています。容量に応じて金額が変わってきますが、プロジェクトを非
[書評]「Web制作者のためのSassの教科書」 ｜https://wp.yat-net.com/name
「Web制作者のためのSassの教科書」を著者の平澤 隆さん（@hira）、森田 壮さん（@sou_lab）より頂戴しましたので書評を持ってお礼とさせて頂きます。 この書籍はCSSのメタ言語であるSassに関して「導入のメリット」、「導入方法（Windows、Mac）」、「実際の使い方」、「リファレンス」まで必要な事を細部にわたって掲載しています。 導入するにあたって気になるのは学習コストとそれに見合う効果だと思いますが、僕が実際に利用して便利だと感じるのはソースコード管理のし易さ、コーディングの時間短縮と冗長になりがちなソースコードの減量化、変数や四則演算が扱える効率の良さの3点が大きいです。 書籍を読めばそれらのメリットがどれ程のものかを知れるのは勿論、より詳しく便利に使う方法や快適に使えるツールなどといったSassに関連する幅広い知識を得ることが出来ます。 書籍は下記のような構成とな
![[書評]「Web制作者のためのSassの教科書」 ｜https://wp.yat-net.com/name](https://cdn-ak-scissors.b.st-hatena.com/image/square/4b5284bee55c04ba13d388ef455db4259746074a/height=288;version=1;width=512/https%3A%2F%2Fwp.yat-net.com%2Fyatblog%2Fwp-content%2Fuploads%2F2013%2F09%2Fsass_book_00.jpg)
文章をデザインする – 段落や箇条書きをより読みやすくするために ｜https://wp.yat-net.com/name
文章を読み易くする為に段落を用いてレイアウトすることは非常に多く、いかに読みやすく、いかに見やすいかを考えて構成する必要がありますね。 1.段落の使い方 2.読みやすい改行位置 3.箇条書きについて 4.文章をデザインするという事 段落の使い方 このブログではある程度の長さで1段落を設定し、一つ一つのブロックが長過ぎないようにある程度の調節を心がけています。 しかし可読性や視認性の事を考えると当然これだけでは駄目ですよね。もっと考えるべき点があります。 今回はちょっとその辺りについて考えをまとめてみたいと思います。 読みやすい改行位置 まず文章を構成するにあたり、必ず考えるべきなのは改行の位置です。Webに限らず紙媒体でも同じで、どこで改行すれば読みやすいのか・見やすいのかを意識するのはとても大切な事ですよね。 基本的に改行は句読点位置で行う事。これが一番シンプルではないでしょうか？あと、
スランプと向き合うにあたって ｜https://wp.yat-net.com/name
最近ブログが書けなくてスランプ気味なのですがこのスランプを脱却するにはどうするかって考えて見たのでちょっと書いて見ることにしました。これがリハビリ？になればいいんですけどね。 1.何がスランプか 2.とりあえず書かない 3.とりあえず書く 4.最後に 何がスランプか ある日、いつもブログを書いてるスタンスでPCの前に座ってWebサイトやブログをみたり、頭のなかの整理をしてこれを書こう！って思っても全然進まないんですよね。それこそ気がついたら3時間ぐらい経ってるのに1文字も書けてないとかもありました。 このブログは基本的に1週間に1本書くように心がけているのですが、どうしてもそれが出来ない時はやっぱりあります。そんな時は仕方ないと考えていますが、あまりに期間が空くと心理的にあまり良くない状況になり「このままずっと書けないのではないか？」とネガティブな思考になってしまいます。 「別に書けないか
IAシンキングとは -information architecture- ｜https://wp.yat-net.com/name
2013年 04月 19日 IAシンキングとは -information architecture- カテゴリ： IAシンキング タグ：IAサイト構築サイト設計 サイトの設計、情報の整理、SEO、UI。Webサイトの構築時に考えるべきことはたくさんありますね。世のWebデザイナーの方やディレクターの方、インハウスの方など、色々な 役割の人がそれぞれの観点から情報を整理したり、競合サイトを調査したりと様々な事をしています。 しかしそれらを行うにあたって明確なフローが決まっているか？と言う割りとそうではなく、多くの人が意識的レベルでそのフローを行なっているのではないでしょうか？ それらのフローを意識レベルで行えるということは非常に素晴らしく、欠かすことが出来ないスキルであることは間違いありません。 ですが、プロジェクトに参加するメンバーのスキルやレベルは必ずしも一致しているとは限らない為、ひと
有名なフォント12種類の紹介とフォントの基礎知識について - YATのBLOG
2013年 01月 09日 今さら聞けない？有名なフォント12種類の紹介とフォントの基礎知識について カテゴリ： Font タグ：Font 新年明けましておめでとうございます。今年も色々と挑戦する年にしたいのですが、一先ずブログをしっかり書くというのをベースにがんばります。 早いもので、このブログも気がついたら3年が過ぎ4年目に突入していました。立ちあげ当初は辞めないことを目標にしていましたが、続けることが大事だなと今でも思っています。皆様本年もよろしくお願いします。 今回は自分がよく使っているフォントをまとめました。他にも使っているフォントはもちろんあるんですが、基本的なフォントやWebベースで使えるフォントあたりを紹介しています。 1.フォントリスト 2.フォントの基本 3.考察 フォントリスト 欧文フォント 1.Arial 2.GEORGIA 3.Myriad 4.Verdana 5
使ってわずか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で動作するエディタです。テキストの編集やコーディングを早くするショートカ
WordCamp Osaka 2012を振り返って ｜https://wp.yat-net.com/name
2012年11月3日にWordPressのお祭り的イベントWordCampが開催されました。僕自身は前で話す立場だったり、実行委員だったりといった形で参加し、非常に貴重な体験ができた1日でした。 1.実行委員として 2.スピーカーとして 3.全体を通して 4.最後に 実行委員として 当日実行委員でしたので、持ち場に待機していました。2F受付の横にあるサービスカウンター（WordCampやWordPressに関する質問を答える場所）が持ち場だったんですが、受付横というだけ有り質問がバンバン来る？とかちょっと恐れてたんですが、僕は何故か男子トイレの場所しか聞かれませんでした。他の方は僕が居ない間に色々と質問があって大変だったみたいです。 え？じゃあ何もしてないの？って聞こえるかもしれませんが、そんなことは無くて会場で色々動きまわったりしてました。ホントです。 参加された方々からは「凄く楽しかっ
コーディング速度を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をより便利に使え
様々なサイトナビゲーションとそれらの役割 ｜https://wp.yat-net.com/name
Webサイトの中身は情報量が多く広大になりがちです。その為「ユーザーが目的の情報へいかに迷うこと無くたどり着けるか」を考えることが非常に重要なことになってきます。それを解決するのがナビゲーションであり、 我々はWebサイトを構築する段階で様々なナビゲーションパターンから、場面場面に応じて必要な物を選定して配置する必要があります。 今回の記事ではその様々なナビゲーションにはどういうものがあり、それぞれどういう役割を担っているかを解説したいと思います。 1.ナビゲーションパターンについて 2.様々なナビゲーションタイプ 3.まとめ ナビゲーションパターンについて まず初めに、長谷川敦士氏がパターン分類した「7つの主に企業サイトで使われるナビゲーション」を見て行きましょう。 階層型ナビゲーション 機能ナビゲーション 関連ナビゲーション ダイレクトナビゲーション パンくずナビゲーション ステップナ
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法」 情報の整理に置いて
ブログリニューアルしました。変更箇所の要点を「デザイン」、「ソース」、「チューニング」から。 ｜https://wp.yat-net.com/name
2012年 05月 15日 ブログリニューアルしました。変更箇所の要点を「デザイン」、「ソース」、「チューニング」から。 カテゴリ： Webデザイン タグ：WordPressデザインリニューアル タイトル通りなんですが、ブログをリニューアルしました。狙ってるわけではないですが、このブログは大体1年～1年半周期でデザインを変えています。デザインを考えるのって楽しいんですよね。 1.変更点-デザイン部分 2.変更点-ソース部分 3.変更点-チューニング 4.まとめ 1.変更点-デザイン部分 コンテンツ部分 まず大きな改善点として、コンテンツの表示部分を大きくしました。 1行の表示文字数が増えた分、目線の折り返し回数が減ったため、以前より読みやすくなったかと思います。 ただ、1行が長くなるということは目線を戻すまでの距離が増えますし、文字数自体も増えすぎてしまうため、文字サイズを若干大きくする事
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
