デザインを行う上では、ツールを使うのが必須です。有名なものだとPhotoshopやIllustratorがありますが、「まずは無料で気軽にWebデザインをしてみたい」という人もいますよね。 そこで今回は、Webデザインに使える無料のツールやWebデザインを効率化できるサイトをまとめて紹介します。 今回紹介する無料のWebデザインツール・ソフト ワイヤーフレーム・モックアップ・プロトタイプ作成ツール グラフィックデザイン作成ツール（写真加工・イラスト作成） テキストエディタ（HTML・CSSのコーディング） 配色選びに使える無料オンラインサービス Webサイトが制作できるオンラインサービス （編集部注：この記事は2013年08月29日に公開された記事を再編集したものです。） ワイヤーフレーム・モックアップ・プロトタイプ作成ツール ※ワイヤーフレーム・モックアップ・プロトタイプとは？ ワイヤー

こんにちは、ディレクターの溜水です。 LIGではプロジェクト管理にRedmineというツールを利用しています。 今まで使用したことがなかったので、「何ができて、何が良いのか」を自分の勉強と兼ねて簡単にまとめてみました。 【こちらもおすすめ】 ☞ 時代は共有！タスク管理を共有できるWebサービス12選 Redmineで何ができるの？ Redmineとはオープンソースの「プロジェクト管理ツール」です。 複数人でのタスク管理と進捗管理の情報共有がオンラインで簡便に行えます。 試しに「プロジェクトテスト　サイトリニューアル」というプロジェクトを作ってみました。 Redmineの何が良いの？ 早速、Redmineの魅力を以下に挙げていきます。 プロジェクトに関わる作業、スケジュールを確認できる 個人的にRedmineで一番良いと思うのは、「ガントチャート機能」で、いわゆる工程表です。 「チケット」と

みなさまこんにちは、メディア事業部のそめひこです。 Webライターとしての経験がない、はたまたブログや記事を書いたことがない方と今まで何度かWeb記事を作成してきました。その中で、Webライターとして記事を書く上で、最低限これだけは知っておいてほしいと思うことがいくつかございました。 今回は今までWeb記事を一緒に作成してきて、”最低限これだけは事前に共有しておきたい”と思った事柄をまとめましたので、ご紹介いたします。 Webライター初心者は必読! これだけは押さえてほしい6のことまとめ １、大前提 !「誰に対して書くのか」を意識する ブログや記事を書いたことが無い人、個人ブログしか書いたことが無い人、またニュース系の記事しか書いたことが無い人は、特にターゲットを考えずに書いてしまうことが多く見受けられます。 東京都内在住 20〜25歳 Webデザイナー 既婚者 男性 上記のように事細かに

こんにちは。デザイナーの白浜です。 今回はPhotoshopでギザギザしたアイテムを作る方法をご紹介します。 ジグザグラインの作り方 まずはジグザグミシンで縫ったようなジグザグラインの作り方です。 ラインツールや長方形ツールで細長い線をひきます。 次に「フィルタ」→「変形」→「波形」ツールを使います。 ※この時パスはラスタタイズ化されてしまうので注意。 波型のオプションを上記のように設定します。ポイントは波数を1にすることと、三角波にチェックを入れること。これで均等で角がとがったジグザグになります。 上の設定でできたジグザグはこんな感じです。 このツールの困った点は、ご覧のとおりプレビュー画面に拡大機能がないのでプレビューが意味をなしていないことです。（CS6使用。CCだとどうにかなってたりするかな？） 白色だとよりわかりづらいですね。 一部を新規レイヤーにコピーして、線だけにしてからフィ

「趣味はカメラ」と言いたくて、3年前に一眼レフを購入しました。 九州ライターの村上です、皆さんこんにちは。 【こちらもおすすめ】 ☞ カメラ初心者にオススメな12の構図でデジタル一眼レフで撮影した写真を魅力的に見せよう 愛はある。しかしセンスと知識がない。 カメラ楽しいですよね。 次は明るさを調整しようとか、ピント合わせるところを変えて撮ってみようとか、レンズを変えて撮ってみようとか。 でも3年撮ってもなんだか心に響く一枚がなかなか撮れないので、家族に一体自分の写真の何がまずいのか聞いてみました。すると、美術の成績が2だった父親に「構図がまずい」と言われました・・・。ショックを隠しきれません。 というわけで、今回は構図について勉強したことをまとめてみました。 今回ご紹介するにあたり、自分で撮った写真を何点か使っていますが、「構図やその他諸々のまずさ」はどうか目をつぶっていただけると助かりま

こんにちは。ディレクターのエリカです。 サイトの動作確認中、修正がすぐに反映されないことってありませんか？ その原因は主にブラウザ（Internet Explorer, Safari, Google Chrome, Firefox, Opera など）のキャッシュのトラブルだったりします。 キャッシュとは？ 使用頻度の高いデータを一時的に保存しておくことで、二度目以降の表示を速くする仕組みです。 修正前の情報がキャッシュされていると、修正したはずなのに見た目が最新状態にならない……という現象が起こりえます。Web関係でよくあるのは、ブラウザのキャッシュと、システムのキャッシュです。 システムのキャッシュはエンジニア以外に触りようがないので、ここではブラウザのキャッシュをコントロールする方法をご説明します。 キャッシュをクリアして強制再読み込み（スーパーリロード）！ ブラウザが保存していたキ

こんにちわ。アートディレクター兼2児のパパ、長岡です。 毎回子どもネタですが、最近アンパンマンを指さして「パンパーンパン」とそれっぽい発音をしている息子を見て「こいつ可愛いな」と癒されています（笑） 屈託のない笑顔と持ち前のあどけない仕草で、保育園のマダムたちをイチコロ（表現が古い？）にしているそうです。将来がちょっと心配です・・・。 さて今回は、HTML5・CSS3・jQueryを使用したフロントエンドツールの王道「Twitter Bootstrap（※ver2.3.1）」のお話。 ※この記事を書いている最中にver3.0がリリースされました！（汗）後でゆっくり触ってみたいと思います。 ▲Twitter BootStrap ver2.3.1 Web制作者なら、一度は触れたことがあることと思います。 そのまま使ってみたり、カスタマイズして使ってみたり・・・。 使い方を間違えなければ、とても

はじめまして。五反田の「Clisk（クリスク）」という会社でシステムエンジニアなどをしている芹沢と申します。盟友であるLIGのゴウさんや紳さんと酒を酌み交わしているうちに、LIGブログに記事を書かせていただくことになりました。よろしくお願いいたします。 AWSとは？ http://aws.amazon.com/jp/ AWS（Amazon Web Servicesの略）とは、Amazonが提供しているクラウドサービスの総称で、その中にはさまざまなサービスが含まれています。 EC2（仮想サーバー）、S3（ストレージ）、RDS（リレーショナルデータベース）、CloudWatch（監視）など、たくさんのサービスが提供されていて、それらのITインフラのリソースを、使いたいときに、使いたいものを、使いたいだけ、必要なスペックで、利用することができるのが特徴です。 多くのサービスは管理画面から操作でき

お疲れさまです、モモコです。 ゲリラ豪雨に備えて折り畳み傘を常にバッグに入れているせいか、何となく肩が重いです。 今回はCSS3だけで作れるローディングアニメーションを5つご紹介します！ 閲覧の際にはモダンブラウザ（最新のGoogleChromeなど）をご利用下さい。 FADE LOADING FADE LOADING 入力した文字がふわっと浮かび上がるローディングアニメーション。 質感と動きが合っていてがとてもエレガントです。 CSS3 loading animation experiment CSS3 loading animation experiment DIRT3というゲームのUIにインスピレーションを得て作成されたローディングアニメーション。 多彩な変化がついており、とてもクールなアニメーションになっています。 CSS only loading spinners CSS onl

こんにちは。代表の岩上です。LIGではコーポレートサイトをメディア化するべく色々と試行錯誤しながら、やれ今月はPVはどれくらいいきそうかなどメディア事業部をつついております。今回、ふと、自分自身が良く見ているサイトのPVやUUはどうなのだろうと調べてみたので、分かる範囲で共有します。 Tech Crunch Tech Crunch 海外、国内問わずベンチャーに特化したニュースサイト。ターゲットを絞った上で190万PVはスゴイですね。ターゲット層もIT関連企業で先進的なユーザと明確です。2006年のTechCrunch Japan立上げから僕もずっと見てます。 月間UU：80万 月間PV：190万 メディア資料[PDF] CNET Japan CNET Japan IT系の総合ニュースサイトです。1000万PV以上はさすが。ここ最近、IT系のブログメディアが増えてきてるので、過去から現状の経

頭の固いライター内藤です。 発想が煮詰まってアイディアが出てこない時は誰でもあると思います。 あるいは、アイディアを出すのが苦手な方もいらっしゃると思います。 本日は、そういう固まった頭に効く7つ道具をご紹介します！ アイディアが煮詰まったときに使いたい7つ道具 ※方法と道具がごちゃまぜに見えますが、方法を実現するツールをご紹介しますのでここでは読み流してください。 ※読む順番はどこからでもいいのですが、5～7は順に読むことを推奨します。 1.　マインドマップ マインドマップはトニー・ブザン(Tony Buzan)が提唱した思考・発想法の一つ。頭の中で起こっていることを目に見えるようにした思考ツールのこと。「マインドマップ」という呼称は、英国ThinkBuzan社が商標登録を管理している。 発想したい対象を真ん中に書いて、そこから連想されるものをつなげて書いていくことで思考の整理と豊かな発

お世話様です。ディレクターの鮫島です。 最近、よくUNIQLOのサラファインを着ているのですが、ふとした時に「あ、それサラファインっしょ」って言われるととても恥ずかしくなるのはなぜでしょう。僕はUNIQLOさんが大好きですよ。無印さんも。 ※ちなみに男性用は「シルキードライ」って言うらしいが、サラファインという言い方のほうが印象に残るのでサラファインで通します。 そんなサラファイン鮫島がお送りする本日の記事内容は 「打ち合わせの時に使える、認識を“目”で合わせるためのテクニック」です。 私自身ディレクターなのでお客様とは、ほぼ毎日打ち合わせをさせていただくのですが、イメージ合わせを口頭でしても、なかなか完璧に合わせることは難しいです。 打ち合わせの後で認識を合わせるために簡易な資料は作ったりするものの、それでは時間のロスだったりしてあまり効率的ではないので、私は打ち合わせの場で双方のイメー

パスの練習にはiPod風壁紙自作するのが一番だよ。こんにちは、もりたです。 先日、井上のきあさんの『Illustrator ABC』（エムディエヌコーポレーション）を買ったんですが、すごいなイラレ、いろいろできるのな！って感動したので、今回は覚えた機能を使ってなにか作ってみようと思います。 井上のきあさんの『Illustrator ABC』はコチラからご購入できます： http://www.amazon.co.jp/dp/4844363506 しかし自分の記事見直すとホント何にも知らずに使ってたんだな・・・。 ちょっと恥ずかしいので責めないでください。ほんと恥ずかしいんで！ 紹介したい機能 今回は、［グローバルカラー］［ライブペイントツール］［アピアランス］機能を使いこなしてみたいと思います。 アピアランスで線路記号が作れるということなので、地図を作りながら説明します。 作業環境は、Mac

目次 限界集落の離島の現実 ブロードバンドを引く前の通信速度 あまり有効では無い対策 違う角度からアプローチする 大風呂敷を広げると失敗する 個人の力で出来ること 実現したこと・分かったこと 資金力と実行力は大事 聞いてみる・言ってみる・やってみる・諦めない。 限界集落の離島の現実 限界集落（げんかいしゅうらく）とは、過疎化などで人口の50%以上が65歳以上の高齢者になって冠婚葬祭など社会的共同生活の維持が困難になっている集落を指す、日本における概念。 住民登録されている人口は230名程度いるようですが、高齢者が施設や親族の家に引き取られたりしているため、実質的には200名弱。平均年齢が65歳を超えている高齢者の島。対岸からたった1km弱しか離れていない離島ですが、対岸までは船しか交通手段がありません。 島には医療機関や警察はおろか、信号もお店もありません。ライフラインの電気は島にある鉄塔

こんにちわ段田です。 ここ最近Facebookの仕様変更で修正対応が多かったので、 対応した時の内容をメモしたいと思います。 Likeboxの最小幅が292pxに仕様変更 先月、Facebookのデベロッパーサイトに 下記注意書きが出ていました。 「The minimum supported plugin width is 292 pixels.」 訳「最小幅は292pxにした。それ以下のサイズにしたい場合は神にでも祈ってな。」 確認してみると下記画像の黒枠内に収まるように設定した 幅260pxが適用されず、292pxで設定されていました。 なんてこったい 対策としては２つあります。 1.iframeのコードを使用する iframeのコードを使い、内部のwidthを変更することで最小幅を292px以下に設定できました。 <iframe src="//www.facebook.com/plu

こんにちは！　ライターのしゅーへいです。 アプリデザインや、アプリ紹介などで何かと使われるモックアップ素材。今回はフリー（無料）でダウンロードできる海外サイトを5つ紹介します。 今回紹介するのは、「PSD」や「アクション素材」です。もちろん、紹介する素材屋さんでは、モックアップ素材以外の素材も扱っていますよ。それでは下記よりどうぞー！ 【こちらもおすすめ】 ☞ 質高すぎ！ベクター素材をフリーでダウンロードできるサイトまとめ 使えるモックアップの素材屋さん5選 サイトごとのちょっとした紹介と、そのサイトの素材例を紹介していきます。 Pixeden http://www.pixeden.com/ サイト中央付近にある「Free」から無料素材一覧が開きます。ベクターなどやアイコン素材も取り扱っていて種類は豊富。 素材例 3D iPhone 5 Psd Vector Mockup v2 Psd i

こんにちは、副社長のゴウです。 最近、転職系サイトをいくつか見ているんですが（求人を出す側としてです）、せっかくなので記事にまとめてみました。 転職を考えている人の参考になれば幸いです。 また、他にもこんなサイトあるよーというのがあれば、コメントなどいただけると嬉しいです。 では、いってみましょー！ ITに特化した転職サイト 数ある転職サイトの中でも、特にIT系に特化したサイトをまとめました。IT系に転職するならここから！ Findjob! LIGが大好きFind Job!。 昔からIT業界の求人を広く扱っている求人サイトですので、ご存知の方も多いかと思います。mixiが運営しているという事を意外と知らない人も多いかもしれませんね。 Find Job! キュリア YAHOO!が手がけるIT系転職サイト、キュリア。 人事担当者に「Q」という形で質問を送れるのが特徴です。 キュリア Green

Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools（デベロッパーツール）について、「多分、周知されていないけど、使わないともったいない！」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう！ みなさんはChrome Canaryを使っているんでしょうか？一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです！リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ

search、tel、url、email以外は対応状況が微妙です。 week、colorのみiPhone・Androidに対応していませんでした。 numberはFirefoxは対応していませんが、iPhoneでキー配列が数字になるため、適宜使用したいところです。 フォームの見た目 各typeを対応ブラウザで見た時の見た目の参考です。 今回はMac Chromeのキャプチャですが、各ブラウザによって多少デザインや仕様が変わります。 対応していないブラウザはどうなる？ 各ブラウザで対応していないtypeはtype=”text”で生成されます。 rangeとcolor以外はなんとかなりますね。 バリデートの実用性は？ Safariはバリデートが機能していないようでしたし、仕様も不親切な点が見受けられました。 各ブラウザのバラバラな対応状況を考えると、実用出来るのはまだ先のように思います。 バリ