要件定義、要件定義、一体なにをどこまで定義すればいいんだ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Web事業部マネージャーのさささん（さっさん）です。 Web制作の現場ではプロジェクト開始時に「要件定義」の工程から作業を着手することが一般的です。ただし、いきなり要件を定義するわけではなく、顧客にヒアリングしたうえで課題の整理、要求の整理をおこない、要件定義として落とし込みます。 私は新卒からシステム開発の現場にいたので、要件定義に対して抵抗はありませんでしたが、Web業界で活動するようになってから要件定義がしっかりおこなわれていないプロジェクトがあることに驚きました。また、苦手というか、なにをすればいいのか分からない人たちがけっこういることに気づきました。 そこで今回は、「要件定義ってざっくりとなにをすればいいのか」をチェックリスト形式で紹介いたします。実際に要件定義が必要な場面でぜひ活用してもらえればと思います。 要件定義すべきこと 1. 制作の背景と目的 1.1. 制作
「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
図表化で整理！インフォグラフィックの作り方を事例と共に解説！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
九州ライター村上です。皆さんこんにちは。 言葉じゃ伝わらないそんな案件を的確に、かっこよく伝える今注目のインフォグラフィック。LIGブログでも何度かまとめとして取り上げていますが、そろそろ自分でも作ってみたくなりませんか？ というわけで今回はそのインフォグラフィックの作り方をご紹介していきます。 念のためにおさらいしておくと… インフォグラフィックとは？ 文字や文章ではなく図で案内や説明や情報を伝える手段のうち、情報伝達に特化したもの 文字を表やグラフにする図表化にデザイン性をプラスしたものと考えてください。いまいちピンと来ない場合は、LIG記事「視覚的！インフォグラフィック(infographics)のまとめサイト6選＋作成ツール」、「情報がわかりやすい！インフォグラフィックのまとめサイト11選」をどうぞ。 インフォグラフィックに適した8つの題材 なんでもインフォグラフィックになる、とい
【完全版】インフォグラフィックとは？作成のコツや参考サイトを紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGの岩上です。 インフォグラフィックは情報やデータを視覚的に表現したいときに用いられ、ごちゃごちゃしているものをシンプルでわかりやすく伝えるために用いられます。 今回は、インフォグラフィックとはどんなものなのか、具体例や作成のコツまで解説していきます。 独学でつまずいていませんか？ Webデザインをもっと効率的に学びたい、プロに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は、2013年9月27日に公開された記事を再編集したものです。 インフォグラフィックとは インフォグラフィック（Infographic）とは、わかりづらいデータや情報を、図やイラスト
【スライス不要】Photoshop画像アセット生成の基本とつまずきがちな5つのコト | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） スライスせずに書き出せるPhotoshopの「画像アセット生成」って？ 画像アセット生成とは、ファイルのレイヤーやレイヤーグループのコンテンツからJPEGやPNG等の画像アセットを生成するという、スライス作業を不要とする機能です。PhotoshopCCから実装されている機能で、CC2014以降は画像に加えてSVGの書き出しも可能となりました。 普段からコーディングもしているデザイナーさんは効率化のために早くから使ってい
Adobe XDなしにはもう生きられない！これからのWebデザイナーのワークフローが変わるかも!? | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 野尻湖オフィス デザイナーのずんこです。 最近追加された新機能を確認してみたら、Adobe XDが大幅アップデートされ、さらに誰でも使える無料プランまで提供されていて、改めてすごく進化していることに気づきました。 今でこそ社内のディレクターもデザイナーもXDを使用していますが、XDがこんなにメジャーになる前に社内にXDを普及させようと書いた記事があります。 これ以降XDを使ってなかったそこのあなた。この進化ぶりには目をみはるはずです！ そしておそらく最近のアップデートのありがたみを一番享受できるのがデザイナーなのではないかと私は思うのです。 なので再び、XDを布教する活動を行おうと思います。デザイナーの皆さん、準備はいいですか？ 軽い、早い、簡単そして安心 まず、Adobe XDはAdobe Creative Cloudを契約していれば、今すぐにでも導入できます。 XDを愛用
テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですがみなさん、EJSってご存じですか？ EJSっていうのはですね、なんかもう、こう、すんごいツールでして！ とにかく、使うとコーディングがめっちゃ早くなるんですよ！！ 今回はそれを使って、爆速でコーディングするテクニックの入門編を紹介したいと思います。 EJSとは？ EJSはテンプレートエンジンと呼ばれるツールの1つで、JavaScriptのような書き方を取り入れつつHTMLが書けるという特徴を持っています。 ざっっっっくり言い表すと、SassとCSSの関係に近いです。 「EJSデータでより楽な書き方をして、HTMLに変換して出力する」ことができます。 これが使えるようになると、例えばheaderやfooterなどのパーツを分割して共通化させたり、JSのfor文のような命令がHTML上で使えます
簿記3級の独学と復習に！簿記3級を無料で勉強できるサイト5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
簿記検定を受験した皆さん、お疲れ様でした。しどうです。 私は事務と経理の人であるにもかかわらず、経理の経験はゼロ、知識もゼロです。こりゃ大変！ ということで安直ながらとりあえず勉強して簿記検定をとってみようと思いました。 「教科書・参考書は1冊をやり込め！」 とは勉強の世界でよく言われることではありますが、そうは言っても肌に合わないことがあったり、別角度からみたらストンと腹落ちしたりすることってありますよね。 私が使っていた教材以外に、独学のために参考にしたサイトをご紹介します。簿記3級の勉強には、無料学習サイトが充実してます！ 使うっきゃない。 サイトではきゅきゅっとまとめて記載がされているので、最終確認や直前の見直しにも最適です。 ただ、私みたいな完全ゼロベースな方は最初はまとまった教材を使って、ある程度分かってきてからサイトを使うのが良いかと思います。 それではさっそく見て行きましょ
Googleスプレッドシートの基本事項と知っておきたいアドオンまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集部です。 業務上でGoogleスプレッドシートを使う方も多いのではないでしょうか？ Excelと同じ機能を持つスプレッドシートは、複数人で同時に編集ができるなど使い勝手がよく、ビジネスツールとして欠かせない存在です。 今回は、そんなスプレッドシートの基本事項と知っておくと便利なアドオンをまとめました。 スプレッドシートでできること https://www.google.com/intl/ja_jp/sheets/about/ まずは、スプレッドシートの機能で代表的なものをご紹介します。 Excelのように表計算ができる リスト作成からお金の管理、データの分析など、表の作成やデータのビジュアル化などに適しています。 Excelの機能がそろっているのはうれしいですね。 複数人と共同作業ができる 共有ボタンを押せば、好きな人といつでもどこからでも、スプレッドシートを編
おしゃれな配色パターンが見つかるサイト+アプリ10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先日、個人でやっているサイトをリニューアルしていたのですが、想像以上に色の組み合わせについて悩んでしまいました。 デザインの知識が皆無の私にはハードルが高すぎたようで、文字、リンク、バナー、背景などの色をベタベタ触っていたら、数時間後にはヘドロのような色彩美のサイトが誕生しました。絶望です。 そこで今回は、私のような素人でも参考になる配色見本サイトについて、用途別にまとめてみました。 「わからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！ ベースとなるカラーを設定したい 1． 原色大辞典 https://www.colordic.org/ いつも参考に
【初心者向け】Illustratorの基本操作と使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Webデザインをする上では欠かせないAdobe Illustrator。初心者の方からすると難しいイメージがあり、「使い方がよくわからない」と悩んでしまうこともありますよね。 そこでこのページでは、Illustratorをこれから使い始める初心者の方に向けて、まずは押さえておきたい基本操作や使い方を解説します。 何をやるにしても、基礎は大切です。この記事を読んで、Illustratorの基本の操作方法をマスターしましょう。 「ググってわからないこと」が一瞬で解決するかも？ Webデザインを効率的にプロから学びたい、転職・就職を目指している、全部誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導！6ヶ月でWebデザイナーに。 ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！ ▼スクールの概要をまとめた資料は
現役Web制作スタッフが選ぶデザインの参考になるギャラリーサイトまとめ33選 | ページ 3 / 4 | 東京上野のWeb制作会社LIG
こんにちは、Web制作会社「株式会社LIG」の代表取締役会長、ゴウです。 今回、LIGで働くWebデザイナーとディレクターにアンケートを取り、制作する際に普段参考にしているかっこいいサイトや、おしゃれなギャラリーサイトを集めてみました。 毎日仕事で使っている彼らのチョイスなので、かなり実践的で参考になる、かっこいい・おしゃれなサイトが集まったと思います。 全部で27個も集まったので、ジャンル別に分類もしました。それではいってみましょう！ デザインの引き出しを増やすには？ デザインの引き出しを増やすには、インプットのほかに、自分のアウトプットに対して誰かからフィードバックをもらうという方法もあります。周りに相談できる人がいなければ「スクールでの勉強」もおすすめです。 💡現役のプロからデザインを学べる「デジタルハリウッドSTUDIO ｂｙ LIG」の詳細はこちらから ※このページは、2021
Tumblrテーマを本気でつくる Vol.1「テーマカスタマイズの基本編」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 以前、「Tumblrでもここまでデザインできる！オリジナルカスタマイズの実例解説」という記事で、「いいオフィスBLOG」の例を出して解説をしたのですが、汎用性がないなあと今更反省をしています。 前回はまだTumblr初心者ということもあったので許してもらうとして……。今回は、本気でTumblrテーマを作りたい人のために出直してきました！ 1つの記事にすると長い戦いになると思ったので、以下の順で連載のかたちをとってご紹介したいと思います。 Vol.1 テーマカスタマイズの基本編 Vol.2 テーマカスタマイズの独自タグ理解編 Vol.3 テーマカスタマイズ実践編 テーマカスタマイズということで、あらかじめ「HTML／CSSの理解がある」「Tumblrの管理画面くらいは知っている」というのを前提に話を進めていきます。 Vol.1「テーマカスタマイズの基本編
Tumblrでもここまでデザインできる！オリジナルカスタマイズの実例解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
テーマカスタマイズの解説最新版 （2015年3月26日更新） 本記事より分かりやすく、テーマカスタマイズについて解説した記事を、連載形式でアップしています！以下よりご覧ください。 Vol.1 テーマカスタマイズの基本編 Vol.2 テーマカスタマイズの独自タグ理解編 Vol.3 テーマカスタマイズ実践編 こんにちは、デザイナーのぺちこです！ お盆が過ぎたら、本当に夜が涼しくなった気がします。ツクツクボウシが「ツクツクボウシ」って鳴いてると最初に思った人は、けっこう想像力豊かだったんだなあと思う今日このごろです。 そんなわけで、9月も近づいて参りました。9月といえばLIGが運営を手がけるシェアオフィス「いいオフィス」のオープンが控えています。そして「いいオフィス」では公式ブログ「いいオフィスBLOG」をTumblrで運用しています。 私はこのTumblrのカスタマイズを担当しましたので、今回
フリー写真素材サイトまとめ15選
こんにちは。学生ライターの池澤章太です。 Webで記事を書くときや資料を作るときに、フリー写真素材をよく使うと思います。しかし、イメージに合う写真や素材を見つけるってなかなか大変です。場合によっては商用利用できるか調べるなければいけませんし。 そんなときに、商用利用ができて、無料で使える素材サイトがまとめてあると便利ですよね。 ちなみに動画素材については送別会、結婚式に！映像制作に使える無料動画素材サイトまとめをご覧ください。 今回は、23個ほど素材サイトをまとめました。この記事をブックマークしておけば素材に困ったときに役立つはず！ 【こちらもおすすめ】 無料で商用利用OKのサイト特集 商用利用できるフリー写真素材サイトまとめ23選 ここでひとつ注意を。「フリー」という単語は、なにかと誤解を招きやすいですが、著作権がフリーだったり、クレジット表記が不要だったりする意味ではありません。各素材
【CSS設計】拡張や修正に強いコンポーネントをマークアップする6つのテクニック | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 皆様、CSS書いてますでしょうか。 今回はSMACSSやBEMをある程度ご存知の方向けに、コンポーネントをマークアップする際に役立つテクニックと題して、「SMACSSを使う際に役立つテクニック」「BEMを使う際に役立つテクニック」「さまざまなシーンで役立つテクニック」をご紹介したいと思います。 なお、SMACSSやBEMをご存知ない方は、本記事の参考文献＆記事のリンクが参考になると思いますので、はじめにこちらをご参照いただければと思います。 ※「コンポーネント」という言葉は、使われるシーンによってさまざまな意味になりえますが、本記事においては「Webページを構成するパーツ」と定義させていただきます。 SMACSSを使う際に役立つテクニック編 まずはSMACSSを使う際に役立つテクニックからご紹介します。
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
【PHPで学ぶデザインパターン入門】第7回 Singletonパターン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。 【PHPで学ぶデザインパターン】第7回はSingletonパターンのご紹介となります。 おそらく最も知られているデザインパターンではないでしょうか。 知っている方も多いと思うので、そういう意味でも実践的なデザインパターンです。名前こそ難しそうに聞こえますが、度肝を抜かれるほどシンプルなパターンです。 Singletonパターンとは まずは、どんなパターンなのか説明していきたいと思います。 定義 Singleton パターンを用いると、そのクラスのインスタンスが1つしか生成されないことを保証することができる。ロケールやLook&Feelなど、絶対にアプリケーション全体で統一しなければならない仕組みの実装に使用される 引用元：Singleton パターン – Wikipedia http://ja.wikipedia.org/wiki/Singleton_パターン Sin
【フォントの些事】第2回 Photoshopでの文字詰めとフォントのボディについて | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、デザイナー兼イラストレーターのもりたです。 前回の「【フォントの些事】第1回 インストールする前に確認したいフリーフォントの基礎知識」で次回予告したものがうまくまとめられなかったので、今回は第3回で予定していた、Photoshopのフォントと文字ウィンドウについて書きます！ 普段仕事でPhotoshopを使ってる人でも、文字ウィンドウはその数値が何を指しているのかよくわからないまま使っていることが多いんじゃないでしょうか。 特に文字詰めに使用する「カーニング」「トラッキング」「ツメオプションの設定」の違いがいまいちよくわからない。 例えば「ツメオプションの設定」の「100％」という数値は、文字のどこを基準に何が100％詰まるの？とか。「トラッキング」の数値って何を基準に100なの？ピクセルじゃないしな？とか。 正直に言っちゃえばWebでは文字詰めをそんなに細かく設定することがないの
本気でハマったイラストの世界観が素敵なスマホゲームアプリ7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGでデザイナーをしています、マチルダです。 普段から、アプリはこまめにチェックしてUIの参考にしよう！と心がけているのですが、時折時間を忘れて没頭してしまうアプリが多々あります。 今回は、私自身が普段から仕事の合間に気分転換として遊んでいる、イラストと世界観が素敵なゲームアプリを厳選してご紹介したいと思います＾＾ おすすめアプリ7選 TWO DOTS https://itunes.apple.com/jp/app/twodots/id880178264?mt=8 同じ色のドットをつなげて消す、という至ってシンプルなルールですが、凝ったイラストレーションがステージごとに変わったりアニメーションが気持ち良かったりで、ついつい遊んでしまうゲームです。 アイテムやライフの購入に課金が発生しますが、基本的には無料で遊ぶことができます。ステージも追加されていくので、隙間時間があるとつい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
