苦手を克服！効果的なフォームが簡単に作れてしまうツールやテンプレートまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 最近涼しくなってきましたね。私は自分があまり風邪をひかないせいか、「健康」に対して軽視しているところがあります。いつまでたっても自分は風の子元気な子だと信じきっています。そのせいかは分かりませんが、今は鼻水が止まらずのど飴を過剰に摂取しながら書かせていただいています。 ほんと健康って大事。 さてWEBデザイナーのみなさん、フォームのデザインって悩みませんか？ 登録フォームやお問い合わせフォームなど用途は様々ですが、最近はブラウザ標準のフォームを使用せず、CSS3やらプラグインやらを使っておしゃれに工夫されたフォームのまぁ多いこと。きれいで使い勝手のいいフォームデザインがしたい。でもコーディングに時間が・・ってことありますよね。私はちょっと苦手意識があったりします。 でも、サイトの窓口ともなるフォームは、WEBサイトを運営するにおいてとても重要な役割を持
リリース前に再チェック！つい見落としがちなサイト制作物まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
LIGの背景画像になって以来、いつ街で声をかけられるのかソワソワしていましたが、いつもと変わらない日常を送っているディレクターの鮫島です。 お客さんとの打ち合わせで「セクハラですね」と言われたのはいい思い出です。 そんなセクハラ画像はこちら さて、今回はサイト制作をする上で、油断しているとつい忘れてしまいがちな制作物（404ページなど）をまとめました。 今では見落とすことはありませんが、ディレクターを始めた時は、メインの制作物に気がいってしまい、つい・・細かいページを忘れてしまって、リリースの直前に気づいて慌てて制作する。。というとても恥ずかしい失態をしていたのを思い出します。 制作物といっても幅広いので、ページやパーツ毎にまとめてみました。 必ずしも制作するものばかりではないので、制作物毎にチェックするといいと思います。 ページ編 404ページ 存在しないURLが打ち込まれた場合に表示さ
もう同じコードを繰り返さない！SublimeTextのスニペットで快適コーディング！
こんにちは。 小林です。 今日も、SublimeTextの便利な使い方を、一緒に覚えていきましょう。 今回は、「スニペット」についてです。 DreamWeaverやEclipse等のIDEをご利用の方にはおなじみかと思われますが、 まずは、「スニペット」とは何ぞやというところから。 スニペットとは？ snippet 【名詞】 切れ端、断片 切れ端や断片で何ができるのかといいますと、例えば、何かものを作る際に、よく使う部品を簡単に利用出来る様に準備しておくとどうでしょう？とっても効率がいいですよね？ 三輪車を作る時に、タイヤを三つそれぞれ一から作っていたら、大変だし、出来上がりもばらつきが出たりしますよね。タイヤを作るものを準備してポポーンとタイヤを三つつくっちゃいたいところですよね。 こういう考え方でしょうか。 DRYってやつですかね。 DRY【Don’t Repeat Yourself.
プロジェクト管理ツール「Redmine（レッドマイン）」とは？特徴をまとめてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターの溜水です。 LIGではプロジェクト管理にRedmineというツールを利用しています。 今まで使用したことがなかったので、「何ができて、何が良いのか」を自分の勉強と兼ねて簡単にまとめてみました。 【こちらもおすすめ】 ☞ 時代は共有！タスク管理を共有できるWebサービス12選 Redmineで何ができるの？ Redmineとはオープンソースの「プロジェクト管理ツール」です。 複数人でのタスク管理と進捗管理の情報共有がオンラインで簡便に行えます。 試しに「プロジェクトテスト サイトリニューアル」というプロジェクトを作ってみました。 Redmineの何が良いの？ 早速、Redmineの魅力を以下に挙げていきます。 プロジェクトに関わる作業、スケジュールを確認できる 個人的にRedmineで一番良いと思うのは、「ガントチャート機能」で、いわゆる工程表です。 「チケット」と
基本となる写真の構図12選を一挙に紹介！ステキな写真は構図から。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
「趣味はカメラ」と言いたくて、3年前に一眼レフを購入しました。 九州ライターの村上です、皆さんこんにちは。 【こちらもおすすめ】 ☞ カメラ初心者にオススメな12の構図でデジタル一眼レフで撮影した写真を魅力的に見せよう 愛はある。しかしセンスと知識がない。 カメラ楽しいですよね。 次は明るさを調整しようとか、ピント合わせるところを変えて撮ってみようとか、レンズを変えて撮ってみようとか。 でも3年撮ってもなんだか心に響く一枚がなかなか撮れないので、家族に一体自分の写真の何がまずいのか聞いてみました。すると、美術の成績が2だった父親に「構図がまずい」と言われました・・・。ショックを隠しきれません。 というわけで、今回は構図について勉強したことをまとめてみました。 今回ご紹介するにあたり、自分で撮った写真を何点か使っていますが、「構図やその他諸々のまずさ」はどうか目をつぶっていただけると助かりま
パワーポイントで魅せるプレゼンを。成功に導く3つのポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ライターの村上です、皆さんこんにちは。 PowerPointは操作がとっても簡単なので、WordやExcelに比べると研修時間が短くて済み「なんだこんなの簡単じゃん」とあまり練習していただけないのが実状なのですが、プレゼンテーション自体は数をこなさないとうまくなりませんぜ旦那！ プレゼンの本番は発表でしょ！ さぁ、1週間後のそのプレゼン、たった1回の作成経験で本当に大丈夫ですか？ というわけでパワポ資料作成テクニックでご飯を食べてきたプロが、ブラッシュアップテクをご紹介いたします！ プロが教えるパワポ資料作成【3つのコツ】 1. 一枚のシートに詰込まない！伝えたいことは1つに絞る 自分が大好きな商品だったり、思い入れのある企画だったりするとあれもこれもそれも全部全部伝えたい！ その思いがスライドに溢れかえって逆効果に……。 ポイント：スライドは贅沢に使おう！ お客様が1つずつ理解できるよう
想定する見積をより正確に！工数見積の誤差を減らすPERT手法とは | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、たまです。 突然ですが、皆さんは「プロジェクトは完遂したけど、想定していた見積もりよりも人件費が赤だった・・・スケジュールが伸びてしまった・・・。」という経験はありませんか？ これには、もちろん様々な理由が考えられますが、そもそもタスクの工数分析に問題があるかもしれません！ 今回は、想定工数の誤差を軽減するのに参考となる「PERT」をご紹介します。 PERTとは？ プロジェクトには思いがけない悪い事態が発生し、納品が想定より遅れる場合があります。 悪い事態を明確に予想できる場合はそれを見越して工数を算出できますが、予想できない場合は多少のリスクを足しただけの「一点見積もり」がほとんどではないでしょうか？ しかも、「多少のリスク」とすると最小の工数に寄った計算になります。そういった一点見積もりでは工数の誤差が発生する可能性が高くなります。 そこで誤差を軽減するためにPERTを利用
僕と一緒に始めませんか？世界一のカードゲーム「マジック：ザ・ギャザリング」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、紳さんです。 突然ですが、皆さんはマジック：ザ・ギャザリングというカードゲームを知っていますか？ もし、知らないのなら今日は名前だけでも覚えて欲しいと思います。 ちなみに僕はマジック：ザ・ギャザリングの熱狂的なファンなのです。 マジック：ザ・ギャザリングとは？ 一般的な略称は「マジック」、「MTG」。 1993年に世界初のトレーディングカードゲーム（TCG）として誕生し、2013年現在、世界中で最も多くの人間にプレイされているカードゲームである。 その独特な世界観と作りこまれたゲーム性に魅了されたファンは数知れず、マジックに影響を受けたカードゲームは非常に多いと予想される。 LIGにマジックの宣伝依頼が来た事は、僕にとって最大限にテンションが上がる出来事です。しかし、マジックの魅力を写真と文章だけで伝える事は難しく、頭を悩ませました。 マジックの世界は奥が深すぎるのです。 それ
2013年上半期。印象に残った or 勉強になったオススメの書籍9選。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGの岩上です。2013年も半分以上が過ぎました。早いですね…ディレクターチームとしての提案力の向上、最適な組織づくりや人事制度、セミナーや講演での伝える技術、社内外から認知され競争力のあるブランド力をつけるにはどうしたらいいかなど、上半期も色々と試行錯誤しています。その中で、役に立った書籍をご紹介します。 コミュニケーションをデザインするための本 カンヌ国際広告祭をはじめ、one show、Venice Festival of Mediaなど国内外の広告賞を多数受賞している、電通のクリエーターのひとり、岸勇希さんの著書です。自ら手がけた7つの代表的な事例と、その手法を詳細に解説しています。岸さんが実際に取り組んだ広告を提案から実行までシーンにあわせて詳細に説明してくれるので、プランナーやディレクター、デザイナー等、業界人として非常に参考になります。コミュニケーションの本質や
Webデザイン作成に必須のツール＆効率化できるサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザインを行う上では、ツールを使うのが必須です。有名なものだとPhotoshopやIllustratorがありますが、「まずは無料で気軽にWebデザインをしてみたい」という人もいますよね。 そこで今回は、Webデザインに使える無料のツールやWebデザインを効率化できるサイトをまとめて紹介します。 今回紹介する無料のWebデザインツール・ソフト ワイヤーフレーム・モックアップ・プロトタイプ作成ツール グラフィックデザイン作成ツール（写真加工・イラスト作成） テキストエディタ（HTML・CSSのコーディング） 配色選びに使える無料オンラインサービス Webサイトが制作できるオンラインサービス （編集部注：この記事は2013年08月29日に公開された記事を再編集したものです。） ワイヤーフレーム・モックアップ・プロトタイプ作成ツール ※ワイヤーフレーム・モックアップ・プロトタイプとは？ ワイヤー
まるで外付けHDD！Bitcasaを活用して容量不足を解消！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ども、ゆうせいです。 LIGではメディア運営や編集などの仕事をしています。このメディア運営では画像を扱うことも多く、このままでは俺のMacBook Airのストレージが埋まってしまうという危機感がありました。埋まるのは社長の岩上だけで充分だろってことで、サクッと「Bitcasa」を導入することにしました。 Bitcasaとは？ Bitcasaはクラウド上の外部ハードドライブで、容量が不足することは絶対にありません。 お使いのデバイス（ホームコンピューター、仕事用ラップトップ、携帯電話、タブレット）とシームレスに連携し、どこからでも保管データにアクセスできます。たとえ巨大なファイルでもお友達やご家族に瞬時に送ることができ、方法も簡単です。 引用元：Bitcasa Infinite Driveの概要 | クラウドの外部ハードドライブ ようするにクラウドストレージです。DropboxとかSuga
『ブランド 元スターバックスCEOが教える「自分ブランド」を築く48の心得』から学ぶブランド力 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGの岩上です。強い組織を創りたい、強い会社を創りたいと思っています。社内外からLIGがブランドとして認知され、LIGと何かを共同でおこなうこと自体が目的になるまで昇華していきたい。その期待にしっかり応えられ、クライアントやユーザをわくわくさせることで、更にオモシロイ仕事が出来る。そんな好循環を創りたいと思っています。 今回、読了した「BRAND（ブランド）元スターバックスCEOが教える「自分ブランド」を築く48の心得」の著者岩田さんは、日産自動車、ジェミニ、コカコーラを経て、アトラス（プリクラ）、イオンフォレスト（ボディショップ）、スターバックスのCEOを歴任。全ての企業で業績を伸ばしブランドを創ってきた人です。本書ではスターバックス以外にも、様々な企業のケースが引き合いに出されており、”ブランド”を考える上で参考になったのですが、特に印象に残った点をご紹介します。 ブラン
言語学習サイト「Lang-8」代表の喜洋洋氏に学ぶ！賢くスキルを習得する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ライターの内藤です。 先日、相互言語添削SNS「Lang-8」代表の喜洋洋（き・ようよう）さんに以下のテーマについてお話を聞いてきました。 人をのめりこませるWebサービスを実現する仕組み（UX/UI） 発想のコツ・実現のコツ 今後のWebサービス界で重要になるスキル お話を聞いているうちに、「アウトプットとフィードバック」という一つの軸が見えてきました。 なので今回は、様々な人にとって有効な「使えるスキルを習得する方法」をご紹介したいと思います。 育てる側の方は、ぜひ「使えるスキルを習得させる方法」としてご覧ください。 もくじ 「Lang-8」とは アウトプットとフィードバックに至る経緯 参考になる喜さんの実例 大学受験 起業 Webサービスの運営 使えるスキルを習得するための「アウトプットとフィードバック」とは 量のアウトプット 質のフィードバック 実践するヒント 学校の勉
CSS3だけで作れる格好良いローディングアニメーション５つ！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、モモコです。 ゲリラ豪雨に備えて折り畳み傘を常にバッグに入れているせいか、何となく肩が重いです。 今回はCSS3だけで作れるローディングアニメーションを5つご紹介します！ 閲覧の際にはモダンブラウザ（最新のGoogleChromeなど）をご利用下さい。 FADE LOADING FADE LOADING 入力した文字がふわっと浮かび上がるローディングアニメーション。 質感と動きが合っていてがとてもエレガントです。 CSS3 loading animation experiment CSS3 loading animation experiment DIRT3というゲームのUIにインスピレーションを得て作成されたローディングアニメーション。 多彩な変化がついており、とてもクールなアニメーションになっています。 CSS only loading spinners CSS onl
ノンデザイナーも必見！Twitter BootStrapの特徴と導入前に確認すべき事 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちわ。アートディレクター兼2児のパパ、長岡です。 毎回子どもネタですが、最近アンパンマンを指さして「パンパーンパン」とそれっぽい発音をしている息子を見て「こいつ可愛いな」と癒されています（笑） 屈託のない笑顔と持ち前のあどけない仕草で、保育園のマダムたちをイチコロ（表現が古い？）にしているそうです。将来がちょっと心配です・・・。 さて今回は、HTML5・CSS3・jQueryを使用したフロントエンドツールの王道「Twitter Bootstrap（※ver2.3.1）」のお話。 ※この記事を書いている最中にver3.0がリリースされました！（汗）後でゆっくり触ってみたいと思います。 ▲Twitter BootStrap ver2.3.1 Web制作者なら、一度は触れたことがあることと思います。 そのまま使ってみたり、カスタマイズして使ってみたり・・・。 使い方を間違えなければ、とても
報連相はなぜ重要なのか？徹底する方法と合わせて紹介【保存版】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆さんこんにちは、メディア事業部のそめひこです。 ビジネスでは欠かせない報連相。目的や重要性が理解できていない人は案外多いのではないでしょうか。報連相が原因で個人としての評価、チーム・会社としてのパフォーマンスを下げているかもしれません。 今回は報連相の目的や重要性、報連相を徹底するための方法について紹介します。報連相を行う理由がわからない人、どうすれば報連相を徹底できるのか知りた人はぜひ参考にしてください。 そもそも報連相とは 報連相は「報告・連絡・相談」の略称です。それぞれを個別に紹介すると下記になります。 報告 報告とは、上司からの指示や指令に対して、部下が経過や結果を知らせることです。報告するのは、部下から上司へ、あるいは後輩から先輩へ、という流れになります。 ex.上司からの書類作成の依頼について、進捗を報告する。 連絡 連絡とは、簡単な情報を関係者に知らせることです。そこには自
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools（デベロッパーツール）について、「多分、周知されていないけど、使わないともったいない！」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう！ みなさんはChrome Canaryを使っているんでしょうか？一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです！リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ
これがあれば自信が持てる! ライター必携の原稿セルフチェックシート15項目 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。子煩悩ライターのイワタテです。 娘、と書くより、愛娘、と書いた方がしっくり来るんです。 きっと、愛しているからでしょうね。 ところで、ライターという職種に限らず、仕事で文章を書くすべてのみなさん。 原稿、自信をもって出していますか？ 僕は、自信をもって出しています。 その秘密は、原稿提出直前に必ず使う、15項目のセルフチェックシートです。 このチェックシートを活用するようになってからというもの、クライアントの機嫌は良くなるし、読者からのレスポンスが見違えたし、みるみる仕事が増えていくし……父ちゃんやったぜ愛娘！ 原稿送信のボタンを押すときはいつも不安になるという方。 よろしければこのチェックシート、印刷して机のどこかに貼って、使ってみてください。 □ 原稿の結論がタイトルに明記されているか。 何が書いてある原稿か直感的に理解できなければ、そもそも読者はページを開かない。 □ 想
Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？ 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、
サイト制作の参考になる「優れたWebデザイン」10のポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普段は主にWebフロントエンドを担当しているライターの内藤です。 下記の記事にインスピレーションを頂きましたので、美しいだけではない”優れている”と思われるWebデザインについて、要点を簡単にまとめてみようと思います。 僕は普段実装をやっていて、カンプが届いて「これをコーディングしてください！」っていうお仕事がほとんどなのですが、カンプによってはコーディングしやすいものからデザイナーさんに殺意を覚えるものまで色々あります。 デザイナーからコーダーへ直接デザインが回ることもあれば、間にディレクターが入ることもあると思います。 美しい・きれいなデザインであればあるほど、フロントエンド組も、よし、やってやろうじゃないか！と気合いが入るのは事実です。 けれども、美しいだけでなく”優れた”デザインであれば、以下の様なメリットがあります。 コーディングが楽になるのでフロントエンド組に優しい 下流工程の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
