インスタンスが立ち上がったら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権限に

デザインには意味があります。物を配置するにしても、なぜそれを配置するのか？なぜその色味なのか？なぜそこに置くのか？など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真

2013年 01月 16日 フォントをもっと楽しめるKinetic typography（キネティック タイポグラフィ） の動画17本 カテゴリ： Font タグ：FontTypography このブログもこの記事で300記事目になりました。1周間に1記事程のペースを目標に書いていますが、1000記事を目指そうと思うとあと何年掛かるんでしょうね。考えてもあまり意味が無いので考えるのは辞めましょう。 300記事目なので何を書こうか！って考えたんですけど、考えた所で自分のハードルを挙げるだけな気もするので、そういうことを考えるのも辞めて楽しく行きたいなと思います。 1.Kinetic typography（キネティック タイポグラフィ）とは 2.キネティック タイポグラフィを見てフォントを学ぶ 3.様々なキネティック タイポグラフィ Kinetic typography（キネティック タイポグ

2013年 01月 09日 今さら聞けない？有名なフォント12種類の紹介とフォントの基礎知識について カテゴリ： Font タグ：Font 新年明けましておめでとうございます。今年も色々と挑戦する年にしたいのですが、一先ずブログをしっかり書くというのをベースにがんばります。 早いもので、このブログも気がついたら3年が過ぎ4年目に突入していました。立ちあげ当初は辞めないことを目標にしていましたが、続けることが大事だなと今でも思っています。皆様本年もよろしくお願いします。 今回は自分がよく使っているフォントをまとめました。他にも使っているフォントはもちろんあるんですが、基本的なフォントやWebベースで使えるフォントあたりを紹介しています。 1.フォントリスト 2.フォントの基本 3.考察 フォントリスト 欧文フォント 1.Arial 2.GEORGIA 3.Myriad 4.Verdana 5

2012年 12月 06日 高速にWordPressを動作させる網元を使うべくAWSにブログを移転しました。その手順を備忘録として残します。 カテゴリ： AWS タグ：AWSWordPress このブログをAWS(Amazon Web Services)で提供しているEC2に変更しました。前々からロリポップに対しての限界点がある程度見えていて、いずれ変更することになるけども、それならもうやっておこうかなと言う思いで変えちゃいました。今回はその備忘録として記事にしたいと思います。 1.AWSとは？EC2って？ 2.AWSのメリット・デメリット 3.今回の環境について 4.導入手順 5.サーバーと接続する SSHとSFTPについて 6.料金の確認 7.最後に 8.追記 AWSとは？EC2って？ AWS(Amazon Web Services)というのは、あの多くの人が利用しているECサイトであ

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サイトの中身は情報量が多く広大になりがちです。その為「ユーザーが目的の情報へいかに迷うこと無くたどり着けるか」を考えることが非常に重要なことになってきます。それを解決するのがナビゲーションであり、 我々はWebサイトを構築する段階で様々なナビゲーションパターンから、場面場面に応じて必要な物を選定して配置する必要があります。 今回の記事ではその様々なナビゲーションにはどういうものがあり、それぞれどういう役割を担っているかを解説したいと思います。 1.ナビゲーションパターンについて 2.様々なナビゲーションタイプ 3.まとめ ナビゲーションパターンについて まず初めに、長谷川敦士氏がパターン分類した「7つの主に企業サイトで使われるナビゲーション」を見て行きましょう。 階層型ナビゲーション 機能ナビゲーション 関連ナビゲーション ダイレクトナビゲーション パンくずナビゲーション ステップナ

さくらVPSを契約して色々サーバーを弄ってるんですが、今までSSHに触れて来なかったのでまずそこで四苦八苦してました。軽く覚えるためにもコマンドリストを作ったので公開しておきます。これで自分の見たい時に見れるし編集出来て便利ですね。 あとそれらを使って最初に設定する初期設定も記述しておきます。 1.コマンドリスト 2.さくらVPSでひとまずやったこと。初期設定 3.ログイン→作業用のユーザー作成 4.vimのインストール 5.SSHのポート番号を変更 6.パスワード認証から公開鍵認証（RSA認証）に切り替える7.システムの更新 7.CentOSの環境を日本語化 8.システムの更新 9.まとめ 1.コマンドリスト ・ファイル操作 ・ファイル検索 ・セキュリティ ・解凍・圧縮 ・システム関連 コマンド 概要

2012年 07月 04日 和紙のテクスチャやパターン113種類。商用OKのフリー素材。 カテゴリ： フリー素材 タグ：フリー素材和紙商用OK 仕事で使う事が増えてきそうなので商用OKな和紙のテクスチャをまとめました。規約のニュアンスで使えなかったりもありえますので、念のためご自身で確認してからご利用下さいね。基本的にロイヤリティーフリーなものを掲載しています。

2012年 05月 22日 JavaScriptのテスト駆動開発（TDD）に関して、QUnitを使って勉強してみた。 #jsdokusho カテゴリ： jQuery タグ：javascriptjsdokusho こんにちは、YAT（@yat8823jp）です。5/19のjsdokushoという勉強会に参加してきました。 今回は「JavaScriptのテストに関する勉強会」と言うお題だったのですが、普段より人数が多かったのでグループ単位でワークショップ形式で行い、それぞれのグループごとに別々のフレームワークに関して仕様や使い方を調べると言うやり方で進めました。 1.テストとは 2.Qunitの仕様について 3.実際に触ってみる 4.クリックイベントで確かめてみる 5.最後に 1.テストとは 僕が入ったグループはQUnitと呼ばれるフレームワークを調べることになりました。QUnitはjQuer

デザインやコンテンツ制作の打ち合わせをしていると必ず出てくる「目立たせる」という行為。 人によって「赤くして」とか「大きくして」と言った抽象的な言葉で表現されますが、僕ら制作者はその言葉をそのままの意味で捉えるわけには行けません。 何故なら、依頼者が何か目的があってそこを赤くする必要がある、大きくする必要があるならばそれを取り入れば良いです。ですが、その目的がその要素を目立たせたいという場合では話が変わってきます。 そうなると、本来の目的は「目立たせること」であって、決して赤くすることや大きくすることが目的では無いため、実際に赤くしたり、要素を大きくしても目立たなければ目的が達成されず満足されることは無いでしょう。 赤くして欲しい、大きくして欲しいと言うのは、依頼した人の中にある目立たせる事に直結したイメージである場合が多いので、実際に何を望んでいるのかを読み取ることが大事です。 1.要所

2012年 02月 21日 WordPressをローカルで開発するためのXAMPP事始め＆WordBench神戸、大阪について カテゴリ： WordPress 交流 タグ：WordBenchWordPressXAMPP WordBench神戸のブレンさん（@bren_boss）に声をかけていただき、勉強会に参加してきました。 今回はWordPressだけでなく、HTML5-WEST.jpとWeb CAT Studioの共催という事もあり、html5やJavaScriptの事、またCSS3アニメーションの活用など多岐に渡った話を聞くことができました。 今回のタイムテーブルは下記の通りです。WordPressに関しては初心者の方向けな内容になっていて、これから触ろうという人にぴったりな内容でした。 13:00～13:30　受付 13:30～13:35　はじめに 13:35～14:05　「PHP

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ファイルに変換（コンパイル）します。 コンパイルされたフ

シズル感のある写真を使ったECサイトでは通常の写真よりも購買意欲が注がれます。実際僕自身過去にECサイトで販売していて売れなかった商品も、写真を撮影し直すことで売れたという経験もあります。 それを体験しているからこそ、僕自身ECサイトで写真は大事だと考えています。飲食関係に至ってはとくにこのシズル感が出ているか否かは非常に大きなポイントになってきます。 同じ食材を販売するにしても、訪問したユーザーの多くは「美味しそう！」と感じるから買おうと思うのであり、ただ安いからという理由で買うわけではありません。 ただ安いから買うというのは、その商品をすでに知っているから買うのであって、まだそれを知らない人からすれば安いという理由だけだと「なぜ安いのか？」という考えを引き起こす事になり得ます。 ユーザーが商品を見て、買いたいと思うまでにいかに余計なことを考えさせないか。これは購買意欲を購買につなげる大