【完全保存版】シートで簡単チェック！デザイナーが見落としがちなUIデザイン12の想定漏れ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのほりでーです。 Webやアプリの開発ではデザイナーとエンジニアの連携が欠かせません。デザイナーとエンジニアが分業する場合、デザイナーがPhotoshopなどのグラフィックツールで完成図となるデザインカンプを作成し、それを元にフロントエンドエンジニアが実装してWebサイトを完成させることが多いでしょう。 しかし、最近のWebサイトで多用されているリキッドレイアウト（横幅の変化に追従するレイアウト）や、ユーザーの操作に反応するインタラクティブなアニメーション表現、CMSやJavaScriptと連動して動作する複雑なUIなどをカンプ上で表現するのは困難です。 そのため、デザイナーが「ここはこういう風に動かしたいな〜」と思っていても、それがエンジニアに伝わっていない、という見落しも発生してしまいます。 一般的に、ソフトウェアの開発では仕様が不安定（＝必要な機能
rgbaster.jsを使って画像の色を抽出してみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです。 今回は、画像からカラー情報を抽出する方法について書いてみたいと思います。 rgbaster.jsを用いた画像の色を抽出 まずは下記URLからrgbaster.jsをダウンロードします。 rgbaster.js https://github.com/briangonzalez/rgbaster.js/tree/master ダウンロードできたら、rgbaster.jsを読み込みます。 <script src="js/rgbaster.js"></script> サンプリングしたい画像に任意のidをつけてrgbaster.jsで読み込んであげましょう。 <img src="images/sample.jpg" id="sampling" height="600" width="900" alt=""> 次にRGBastarのcolorsメソッドに、第1引数でサン
ハッキングってどうやるの？現役ハッカーに聞いてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エディターのエリーです。 先日、長澤まさみさんのSNSをハッキングしてプライベートを覗き見た男性が逮捕されました。芸能人をふくむ約1000人分のアカウント情報を把握していたそうです。 うらやまけしからん。 じゃなくて、怖いですね。「いまハッキングされたら社会的に死ぬ」という人も多いんじゃないでしょうか。 ということで、お呼びします。 現役ハッカーの浜辺将太さんです！ 長年勤めたヤフーを昨年卒業し、現在は六本木「Hackers Bar」のバーテンダーや、ドクターズモバイルという医療IT系スタートアップの取締役CTOをしています。 穏やかな物腰で、「東京23区内だったらどこでも行きますよ」と言ってくれた男気のある方。埼玉県の浦和まで来てもらいました。 肩書きが「ハッカー」の人ってはじめて……。あるんだ、実際。 どうやってハッキングをするのか、血の気が引くような本当にあった怖い話を聞
Webディレクターがオススメする、ディレクションに役立つ本20選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。やっと先日実家から布団が届きました！ のっちです♩ ぬくぬく眠れるのは良いのですが、今度は布団から出るときの辛さが2倍になったのを痛感し、果たしてどちらが良かったのかなと悩んでいます。幸せって難しいですね。 さて、前回の記事「LIGのデザイナー陣がオススメする、これだけは読んでおきたいデザイン本15選」に対しては、ありがたいことに社外内どちらからも良い反響をたくさんいただくことができました。 なので今回は、そんな私たちデザイナーに日々寄り添い、支えてくださるLIGディレクター陣におすすめ本を紹介してもらいました。 もくじ 顧客の要求を確実に仕様にできる要件定義マニュアル USAMIのブランディング論 ブランドのはじめかた 現場のプロが教えるWebディレクションの最新常識 知らないと困るWebデザインの新ルール2 モメないプロジェクト管理 77の鉄則 Webディレクション標準ガイ
Photoshopのハイパスフィルターを使った凄技レタッチを解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの白浜です。 最近写真のレタッチすることがちょくちょくありまして、その中で個人的に「これはすごい！」と思ったPhotoshopのハイパスフィルターを使った方法について、紹介していきたいと思います。 「ググってわからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！ ハイパスフィルターを使ったレタッチの手順 1. レイヤーを2枚複製する まずは元画像を2枚コピーします。レイヤー名は任意なのであとでわかりやすいように「ぼかし」と「ハイパス」と名前をつけています。 2. コピーしたレイヤーにフィルタをかける 複製したレイヤーにそれぞれフィル
プロモーションとは？PRとの違いや5つの手法について解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集部です。 プロモーションという言葉を聞いたことはあるけど、意味を正しく理解している人は少ないのではないでしょうか。今回はプロモーションの意味やPRとの違い、手法などをご紹介します。 プロモーションの意味があやふやな人や初めてプロモーション担当になった人はぜひ参考にしてください。 プロモーションとは プロモーションとは マーケティング戦略の一部として行われる販売促進のためのあらゆる活動 プロモーションという言葉についてはさまざまな定義がありますが、マーケティング戦略の一部として行われる販売促進のための宣伝活動、あるいは広報活動という意味で用いられることが多いです。 また、プロモーションをおこなう主な目的としては以下の3つなどがあります。 新規顧客の獲得 商品やサービスの認知拡大 既存客に対する販売の動機付け そのため、プロモーションとは広く解釈すれば、販売促進のた
LIGに勤めて半年で長野に左遷され、ゲストハウスをやることになりました。本当にありがとうございました。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
『あ、はい。読んでいただいてたんですね』 【求人】人手が足りてません… LIGでは編集者を募集しています【採用】 『あの記事評判良くて、8名の応募、2名の採用ができました』 『1名の採用枠だったのに2名も採用しちゃったから、余ってるよね、人』 『ところで、俺が長野でゲストハウスはじめたの知ってる？』 『はい！野尻湖に作ったんですよね。あれメッチャ行ってみたいっす！』 『悪いんだけど堀田、来週からそこ勤務ね』 ・ ・ ・ ・ ・ ・ 『いやいやいやいや、ゴウさ〜んｗｗｗ』 『え……』 ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ こうして僕は左遷された…。 新卒から4年間勤めた介護職を辞め、あこがれのLIGに入社して半年。 インターネットの世界で戦いたい。自分を成長させたい。そういう想いでLIGに入社しました。 確かに、この半年間で、期待に見合った結果は出せなかったと思います。 そもそも、
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
ブルブル落ち着きのないエフェクト「CSShake」を使ってみた！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、はやちです。 はやちはよく周りの人から落ち着きがないとよく言われます そういえば子供の頃から親にも言われていました((((´ʘ‿ʘ｀)))) 今回は、はやちのようにブルブルふるえる落ち着きのないエフェクト「CSShake」をご紹介致します((((´ʘ‿ʘ｀)))) ブルブルする種類 ブルブルの動きは全部で9種類用意されています((( ˘ω˘)))☝ Basic Shake…基本のブルブル Slow Shake…ちょっと遅く大きくブルブル Little Shake…小さくブルブル Hard Shake…激しくブルブル Fixed Horizontal…横にブルブル Fixed Vertical…縦にブルブル Fixed Rotation…回るようにブルブル Opacity Shake…透明度が変わりながらチカチカブルブル Crazy Shake…縦横無尽にバタバタチカチカブルブル
隠れた便利機能ベスト3
こんにちは。デザイナーのハルエです。 今回は、知っているのと知らないのとでは作業時間に圧倒的な差がついてしまうPhotoshopの効率化機能マイベスト3を紹介させていただきます！ 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ ※2014年3月7日に公開された記事を再編集したものです。 その1：Vanishing Pointでハメコミ合成 みなさん、“Vanishing Point（ヴァニシングポイント）”機能をご存じでしょうか？ 機能の存在は知っていても、使ったことのない方が多いかと思います。 このVanishing Point
企画・提案・見積もりに！エンジニアからディレクターへの7つの提言 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。エンジニアの鳥よしです。 エンジニアとして働いていると、企画や提案、見積もりの際に、ディレクターさんからエンジニア視点の助言を求められることが多々あります。 今回はこれまでの経験から、WEBサイト制作時に気を付けておきたいポイントをまとめてみました。 参考にしていただければ、社内のエンジニアからの支持率が上がること間違いなしです。 WEBディレクターさんに知ってほしいことを、以下7つにまとめました。 PCサイトでもスマホ・タブレットへの対応を検討してください PCサイトを構築する案件の場合、デバイスをどこまで対応させるかは要注意です。 PCだけでいいんじゃないかと思いがちですが、タブレットやスマホで閲覧するユーザーも当然いますので、対応はマストでしょう。 また、別にタブレット用、スマホ用サイトを用意するとしても、もし「PC版サイトを見る」ボタンを作る予定なら、やはりあらかじめ対
相手に響く提案書の書き方・流れを解説。コンサル歴25年のノウハウ公開 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ライターのあだちです。お初にお目にかかります。 昨年9月に12年間務めた会社を辞め、「学習塾」と「人事コンサルティング」を生業とするため会社を作りました。欲を出さず、全力で細々とやっております。今後ともお見知り置きをお願いします。 さて、本日の話題は「提案書」についてです。 【こちらもおすすめ】 そもそも提案とは？ 物売りであってもWebサイトの制作であっても、はたまた飲食店であったとしても、仕事を取らなければ会社は潰れてしまいます。 そして、商品が巷にあふれている今、仕事を得るためには「買い手」に自分たちのサービスや商品の魅力を十分に伝えるために「提案」が必要です。 もし「提案」がなければ、お客さんは「他と何が違うの？」「我々がそれを買う理由は？」といった情報をすべて自分たちだけで調べなくてはいけません。それどころか、その情報を自然と得ることができなければ見向きされないことも
プレゼンが苦手な人へ！あなたの資料が「ガラッと変わる」便利なツールまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆様、こんにちは。メディア事業部のまゆです。 最近はパワポなどを使って資料を作成することが少し増えてきました。外部の方の資料を見せていただくと、「こんな資料を作れてしまうのか……」と思うときが結構あります。 まだまだ勉強中の身ですが「こういうプレゼンができたら楽しそうだな」、「こういう資料を作ってみたい」と思ったプレゼンツールを何個かピックアップしてみました。 では、ご紹介したいと思います。 これは使いたい！プレゼンツール Zoho Docs https://www.zoho.com/docs/show.html オンライン上でプレゼンテーション資料を作成・公開できる完全無料サービス。 PC内にデータを保存していなくても、インターネットさえつながれば、いつでもどこでも利用することができます。作成した資料は.ppt/.pdf形式でエクスポートが可能。.ppt形式のファイルやGoogleドキュ
遊び心いっぱい♪Webサイトで使えるゲーミフィケーションの手法4つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのサリーです。 休日はゲームばかりやっている私なので、ゲーミフィケーションの事例を見るのが好きです。 ゲーミフィケーションとは？ ゲームデザイン手法や仕組みを用いて問題の解決やユーザー契約などを獲得すること。例えば、既存のシステムやサービスへの、ポイント性、順位の可視化、バッジ、ミッション、レベルシステムの採用など。さらにゲームの要素を盛り込むことによって楽しみながら意図せずそれらと関わっていってもらうことが目的で行われる場合もある。 -wikipediaより- 読み飛ばしがちなサイトのチュートリアルも、スタンプラリー形式だとスイスイ進めてしまいます。今日は簡単なものからこれぞゲーミフィケーション！なものまで、事例を7つ紹介します。 ランキング ユーザーのポイントや投稿数などでランキングを作成し、ユーザー間の競争心を持たせることでサイトを活性化させます。 食べログ h
ズボラ人間も安心！チームのスケジュールを安定して回せる6つのルール | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。子煩悩ライターのイワタテです。 子煩悩というキャラ設定をしてから、飲み会に誘ってくれる友だちや仕事仲間が激減しました。チームのメンバーで飲み会とかやってる画像がFacebookに上がってきているのに、僕だけが誘われてなかったりします。 スミマセン、お酒大好きです、すぐ行きます、誘ってください…。 さて。 チームで仕事をする上で一番大切なことって、何でしょう。そう、スケジュールですね。ひとつ小さな予定が崩れただけで、ドミノ倒し式に延々とトラブルが続発していく…。 そんな経験、何度もあります。自分に甘い、ということにかけては定評のある僕ですが、あれこれとスケジュールの引き方を工夫してきた結果、現在では編集者として、大小4つのメディア案件を毎月なんとか回転させることができるようになりました。 今回は、ズボラ人間でもスケジュールを上手に回せるようになるための6つのルールを紹介します。予
Webデザイン作成に必須のツール＆効率化できるサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザインを行う上では、ツールを使うのが必須です。有名なものだとPhotoshopやIllustratorがありますが、「まずは無料で気軽にWebデザインをしてみたい」という人もいますよね。 そこで今回は、Webデザインに使える無料のツールやWebデザインを効率化できるサイトをまとめて紹介します。 今回紹介する無料のWebデザインツール・ソフト ワイヤーフレーム・モックアップ・プロトタイプ作成ツール グラフィックデザイン作成ツール（写真加工・イラスト作成） テキストエディタ（HTML・CSSのコーディング） 配色選びに使える無料オンラインサービス Webサイトが制作できるオンラインサービス （編集部注：この記事は2013年08月29日に公開された記事を再編集したものです。） ワイヤーフレーム・モックアップ・プロトタイプ作成ツール ※ワイヤーフレーム・モックアップ・プロトタイプとは？ ワイヤー
IEなんて怖くない！冷静にバグを叩き潰すための11のヒント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングを始めてはや1年。今でこそ、そこそこできるようになってきた僕ですが、初めの頃はそれはもう悲惨なものでした。 あるときはIEのバグで先輩に助けを求め、またあるときはIEのバグで先輩に助けを求め、そしてまたあるときはIEのバグで先輩に助けを求め・・・。 そんな時代に、CSSハックを使わず、極力自力でバグをつぶすために、僕は先輩の助言を元に「バグで詰まったらまず目を通す11のヒント」なるものをノートにリスト化して書きとめておいたのでした。 バグったらとりあえずこの項目に目を通す。するとGoogle先生に頼らずともなんとかなるようになりました。 今でこそもう使わずともよくなりましたが、コーディングに不慣れな方は、このようなリストを作っておくといいかもしれません。 参考程度に以下、ご覧になってみてくだ
ポチッとするだけでプロ級の写真処理ができる良質なPhotoshopアクションまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。 昨今セピア風やらトイカメラ風何やら、昔っぽい写真のような加工が流行ってるみたいですね。自分的には今の最新鋭の一眼で撮ったまんまのようなクリアな写真のほうが好きだったりします。 とはいっても、たまには古き良き昔の写真も味深くていいのかもしれないですね。デザイン的見地から見ても色が統一されてたり、色の寒暖差が出たりで印象的な写真になりやすいものね。 スマホとかでその手のアプリが多数出回っているので、カスタマイズ性は低いものの、割りと手軽にできますが、パソコンなら言わずと知れたことだが、Photoshopで加工する場合がほとんどだと思います。 スマホよりは自分好みにいじれるが、いざやろうと思うとなかなか手間がかかって面倒だったりします。加えて、枚数が多い場合なんかはさおさらそうです。だがしかし！アクションを使えば一気に形勢逆転！ 寒色系 Purple wonde
Photoshopで簡単に配色を確認する裏ワザ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。 みなさんは写真やイラストを見たときに、「色使いうまいな！ どういう色構成をしているんだろう？」と思ったことがあるのではないでしょうか？ デザイナーなら誰しもそう思ったことはあると思います。 プロなら肉眼でもぴんとくるかもしれませんが、もっと正確に色構成を確認したい場合もあると思います。例えば、イラストなら最初から配色はできても、写真ではそれが難しいですよね。そこで色構成をチェックをすれば、より理想に近い配色に直すこともできるかもしれません。また、単に配色を確認して色使いを学ぶこともできますよね。 今回はそんな望みを簡単に叶えてくれる、Photoshopのあまり知られていないが意外と便利な機能をご紹介します。 やりかた 今回はこちらの写真を例に使います。 Step 1 「ファイル」から「web用に保存」を選択します。 ※ショートカットはcommand + a
世界一うざい「ページTOPへ戻る」が実装されました。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGの副社長、ゴウです。 この度、LIGブログに「ページTOPに戻る」機能が実装されました。 どのサイトにでもある、普通の要素だと思うのですが、今回、我々は“ウザさ”にこだわって作ってみました。 ページ右下にある弊社エンジニアの段田をクリックすると… ゴゴゴゴゴ… ドドドドドドドド… という感じで、段田が天に登るラピュタのように上昇していきます。 俺が知る限り、ここまでうざったい「ページTOPに戻る」は無いと思いますし、今回の開発にはデザインとJSの実装で4日ほどかかっており、「うざい」という以外に感想が無いような機能の実装に大切な会社のリソースを割いてしまった事をこの場を借りてお詫び申し上げます。 とは言え、この機能の一番下に、広告領域も設けてあります。 時間にして2秒ほどしか見えない上に、クリックをするにはそれなりの慣れと反射神経を必要とするのですが、今回特別にこの広告枠
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
