文章をデザインする – 段落や箇条書きをより読みやすくするために ｜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本書くように心がけているのですが、どうしてもそれが出来ない時はやっぱりあります。そんな時は仕方ないと考えていますが、あまりに期間が空くと心理的にあまり良くない状況になり「このままずっと書けないのではないか？」とネガティブな思考になってしまいます。 「別に書けないか
ユーザビリティ向上のために身の回りから学ぶ ｜https://wp.yat-net.com/name
Webサイトの制作においてユーザビリティ向上を考えることは必要不可欠です。UI、UX、様々な観点で物事を考える事は非常に素晴らしい事ですが、制作する事に意識が向いていると視野が狭くなってしまい単純な事に気付けない事も多くあります。そうならない為にも私たちは日頃から様々な物に目を向け、どういった部分がユーザービリティを高めているのか。どういった点がユーザービリティを低くしてしまっているのかを認識しておく必要があります。 1.ユーザビリティ向上の為のヒント 2.身の回りから学ぶ 3.参考資料 ユーザビリティ向上の為のヒント ユーザビリティをより良くする為にサイト設計上「どうすればより使いやすくなるか」を考えることは非常に大切なプロセスです。 どういった場面でユーザビリティが向上し、どういった事をしてしまうとユーザービリティは低迷してしまうか。様々な場面や利用シーンも含め合理的に設計していくこと
情報の収集手段と活用について ｜https://wp.yat-net.com/name
はてなブックマーク、feedの購読、ツイッター、facebook、最近ではGunosyなど様々なサービスを活用して情報の収集を行なっているかと思いますが、それらの情報を実際の業務の中で大体どれぐらいの情報を利用しているのでしょうか？ 1.情報の収集元と、取り扱い方 2.収集した情報の切り分け 3.実際に活用する情報 情報の収集元と、取り扱い方 僕は普段feedを購読して好きなサイトからの情報収集を行い、自分のフィルター以外の目線としてツイッターを利用しています。 自分の目線だけに頼ると狭い視野の中で物事を判断してしまいがちであまり良くないと言う考えのもとです。 ツイッターは様々な観点を持った人が非常に多く、自分が普段目にする事は無いであろう情報をポストしてくれる為、自分では普段目にすることのない情報を見せてくれることがありがたく感じています。 ですが、ツイッターのタイムラインは御存知の通り
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
すしぱくさん（@susipaku）さんから一日のタイムスケジュールを晒せという司令があったので晒したいと思います。 タイムスケジュールの円グラフデータ 現在こんな感じで活動してます。
AWSにApache+PHP+MySQLとphpMyAdmin,vsftpdを導入する手順 ｜https://wp.yat-net.com/name
インスタンスが立ち上がったらSSHでサーバーにログインし、パッケージをインストールしていきます。SSHでログインするにはMacなら標準で搭載のターミナル、WindowsならTeraTermのようなフリーソフトを利用します。 まずはサーバーへ接続しましょう ssh -i （鍵のパス) ec2-user@(Public DNS) 鍵のパスは、KeyPairsを作成した際に保存した***.pemというファイルです。それが保存されている場所を指定します。 ec2-userはユーザーIDで、AWSにてSSH接続する際は大体このIDで接続します。 Public DNSはインスタンスを立ち上げた際に割り当てられる言わばURLに当たります。 もし接続した際に下記のようなエラーが出た場合は鍵のパーミッションを変更しないと行けません。 chmod 600 (鍵のパス) 接続できたらsuを利用してroot権限に
とりあえず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
デザインには意味があります。物を配置するにしても、なぜそれを配置するのか？なぜその色味なのか？なぜそこに置くのか？など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真
大阪のお洒落スポット「中崎町」の写真を撮って来ました ｜https://wp.yat-net.com/name
大阪のお洒落スポット中崎町へ写真をとりに行って来ました。北区梅田にある街で、昔ながらのレトロな建物が続く中に色々なカフェや雑貨屋があったりと、ブラっと散歩するだけでも凄く楽しめるスポットです。雑誌等でも特集が組まれているほどの人気スポットなんですよね。 お昼に集まってランチを取り、そこから夜までずっと歩きまわって撮影していたので、全部で150枚程とることが出来ました。その中でも良かったと思う20枚を公開します。写真の腕は全然たいしたことないんですけど、インスピレーションなんかに役立ててもらえれば幸いです。 公開するものは看板とお店をメインに絞りました。看板はタイポグラフィとしても楽しめて良いですよね。
ECサイトにおける考えるべきユーザビリティ9ヶ条 ｜https://wp.yat-net.com/name
ECサイト、ネットショップにおいて考えておくべきユーザビリティを9つピックアップしました。もちろんこれが全てではありませんし、サイト設計の上ではもっともっと細かく考えることはたくさんあります。今回はコンバージョンを下げない、直帰率を下げないために施策する場合に何をするか？を簡潔にまとめています。他のネットショップを運営されている方がどういう事をされているかも凄く気になりますね。 1.ロゴはHOMEへ ロゴをクリックすればトップページへ行くという認識を持たないユーザーは沢山います。トップページへ行くためのボタンは別途用意し、そういったユーザーへのフォローも施策しておく事が大切です。 リンク時における色を変更し統一することでユーザビリティは確保ます。しかし、ブラウザのデフォルトである青色に下線と言ったルールを採用することで、より多くのユーザーに対してそれがリンクであると言うことを認知してもらい
女性の可愛らしさが詰まったガーリーデザインの特徴。（基礎知識〜フリー素材） ｜https://wp.yat-net.com/name
2013年 03月 05日 女性の可愛らしさが詰まったガーリーデザインの特徴。（基礎知識〜フリー素材） カテゴリ： Webデザイン タグ：ガーリーデザイン デザインのタイプは非常に多く、切り分けるにしても男性らしさ、女性らしさ、児童向け、年配者向など様々な切り口で分けることができます。 ガーリーはそういった中の女性に好まれるデザインに該当し、「少女らしさ」や「可愛らしさ」などを指します。ガーリースタイルといった言い方もしますね。 1.流行 2.ガーリーデザイン・スタイル -a.ファッション -b.建築（カフェ） -c.Webデザイン -b.ブログ -e.ガーリーデザインで特徴とされるもの -f.ガーリーフォト 3.最後に 流行 ガーリーの流行に関してはおそらく1990年代かと記憶しています。 当時ガーリーデザイン、ガーリーフォト、ガーリースタイルと言った様々な言葉が流行し、様々な場面でガー
高級チョコレートブランドGODIVA（ゴディバ）から見るブランド価値やデザイン ｜https://wp.yat-net.com/name
2013年 02月 14日 高級チョコレートブランドGODIVA（ゴディバ）から見るブランド価値やデザイン カテゴリ： デザイン タグ：Fontデザイン 今日はバレンタインデー。バレンタインといえばチョコレートですよね。僕はゴディバのチョコレートが好きなんですが、チョコレートの味はもちろんのことながら、ブランドのロゴであったりパッケージのデザインであったりと、様々な観点で好きな部分が多いブランドなんです。 1.GODIVA（ゴディバ）という名前 2.デザインについて 3.フォント「Optima」について 4.ゴディバのこだわり 5.ブランドの価値 GODIVA（ゴディバ）という名前 ゴディバの名前はイングランドの伝説に出てくるゴダイヴァ婦人からの由来しており、ロゴマークに写っている馬に乗った裸婦の女性も彼女になります。 彼女は夫でもある領主が課した重税により領民が苦しんでいるのを哀れみ、重
デザイナーでも使うと便利なバージョン管理システムGitの勉強会に参加しました ｜https://wp.yat-net.com/name
2013年 02月 05日 デザイナーでも使うと便利なバージョン管理システムGitの勉強会に参加しました カテゴリ： Git タグ：Git この週末にGitの勉強会を開いてもらって基礎的なところから教えてもらいました。これまで興味はあったけど全く何も知らなかったので、いろいろ詳しく教えて頂きました。 1.Gitとは？ 2.用語解説 3.実際に使ってみる。msysgit 4.参考文献 Gitとは？ 分散型バージョン管理システムの一つです。ファイルの更新状態を好きなタイミングで保存しておくことが出来、好きなタイミングで保存している状態へ戻したり、編集した箇所の差分を表示したりする事が出来ます。 また、プロジェクトを複数人で進行している場合に起こりうる、古いファイルでの最新ファイルの上書きといったトラブルについても、Gitを利用すればエラーが帰ってくるため避けやすくなります。 尚、Gitと聞くと
有名なフォント12種類の紹介とフォントの基礎知識について - YATのBLOG
2013年 01月 09日 今さら聞けない？有名なフォント12種類の紹介とフォントの基礎知識について カテゴリ： Font タグ：Font 新年明けましておめでとうございます。今年も色々と挑戦する年にしたいのですが、一先ずブログをしっかり書くというのをベースにがんばります。 早いもので、このブログも気がついたら3年が過ぎ4年目に突入していました。立ちあげ当初は辞めないことを目標にしていましたが、続けることが大事だなと今でも思っています。皆様本年もよろしくお願いします。 今回は自分がよく使っているフォントをまとめました。他にも使っているフォントはもちろんあるんですが、基本的なフォントやWebベースで使えるフォントあたりを紹介しています。 1.フォントリスト 2.フォントの基本 3.考察 フォントリスト 欧文フォント 1.Arial 2.GEORGIA 3.Myriad 4.Verdana 5
WordPressのお作法-テーマ作成時のテスト・デバッグについて WordBench大阪 ｜https://wp.yat-net.com/name
2012年 02月 29日 WordPressのお作法-テーマ作成時のテスト・デバッグについて WordBench大阪 カテゴリ： WordPress タグ：WordBenchWordPress 第2回WordBench大阪に参加してきました。その中でみやさん（@miya0001）がお話されていたWordPressのお作法に非常に興味を持ったのでシェアしたいと思います。 1.テーマのデバッグに関して 2.theme-checkプラグイン 3.テーマユニットテスト 4.参考文献 1.WordPressのデバッグに関して スライド「WordPressのお作法：by miyauchi」 WordPressのテーマはかなりの数がインターネット上に公開されてますし、自身で作ることも可能です。ですがそのすべてが安全という保証はありませんし、エラーの出ている物Web上に公開及び納品すると言った行為は良い
多様化する集客チャンネルとGoogleショッピングの可能性 ｜https://wp.yat-net.com/name
ネットビジネスを行う上で必要不可欠な集客。リスティングやアフィリエイト、SEOと言った様々な手法がある中、更に検索サイトへの登録やポータルサイトの出稿と言った「露出するべき媒体」がますます増え、集客のための運用がすごく大変な物になって来ているように感じます。 1.多様化する集客スタイル 2.商品情報そのものが広告に。商品情報の構造化：DFO 3.Googleショッピング 4.まとめ 多様化する集客スタイル 冒頭で述べた通り集客を行うために露出する媒体が非常に多く、それらを運用して行くことそのものが困難なケースが増えています。サイト運営の体勢が少数になりがちなネットショップではよりその傾向になり易く、「とりあえず集客のために外部サイトを利用している。」といったケースは少なくありません。 それだとこれから先の集客を考えるとどうしても限界点が見えてしまいます。 そうならない為にも、これからますま
コーディング速度を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をより便利に使え
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ガーリーデザインなんかに良く合うカリグラフィーやスクリプトのフリーフォント ｜https://wp.yat-net.com/name