テクスチャ画像が300種類以上のPhotoshopプラグイン「Subtle Patterns」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのサリーです。 以前こんな記事を書きましたが↓ これが無料!?背景画像のフリー素材配布サイト 14選 紹介した中でも一番よく利用しているテクスチャ素材サイトが「Subtle Patterns」です。 シンプルかつシームレスなので、サイトの背景・ボタンなど色々な場面でお世話になっています。 でも素材の数が多いだけに選ぶのが一苦労な上、素材それぞれの違いが微妙なので色々試したくなってしまったり。。。選んで、ダウンロードして、解凍して、Photoshopで当てはめて…の一連の作業が結構時間かかっちゃったりするんですよね。 そんな「Subtle Patterns」からPhotoshopのプラグインが出ました！有料ではありましたが、使ってみるとお手軽に素材を使用できて上記の悩みを解決してくれました。 今回はそちらのプラグインを紹介します。 まずはインストール http://pl
Photoshopであっという間に芝生を型抜きしたような文字を作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの白浜です。 今回は芝生を型抜きしたような文字をあっという間に作る方法をご紹介します。 切り抜きたい文字を配置します。 お好きなフォントで。太めのフォントのほうがいいかも。 マスクにフィルターをかけてギザギザにする。 この手順が重要！ここで文字をギザギザに加工することで、より自然な感じに仕上がります。 文字の形にマスクをかけます。 次に、マスクを選択した状態で、「フィルタ」→「フィルターギャラリー」→「ブラシストローク（スプレー）」をかけます。 数値はお好みで。マスクの方にかけるのがポイントです。 文字がこんな感じになりました。 マスクの方にギザギザ加工を施すので、テキストはラスタライズ化しなくて大丈夫です。 文字をちょっと手書き風にしたい時などこの方法を覚えておくと、文章が変わった時にも対応しやすいですよ！ ギザギザになった文字にテクスチャを重ねる こんな感じの芝生
LIGが「わくわくをつくり、みんなを笑顔にする」ために大切にしていること | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ども、ゆうせいです。 今日は、LIGが「わくわくをつくり、みんなを笑顔にする」ために大切にしていることをご紹介したいと思います。というのも、LIGに入社してまだ数ヵ月ながら、毎日楽しく働いているんだと自慢をしたくなったからです。 LIGブログをご覧のみなさんにもっとLIGのファンになってもらいたい！ LIFE を is Good にしてもらいたい！ というわけで、弊社の社長である岩上が過去にLIGブログで語った、「わくわくをつくり、みんなを笑顔にする」ために大切にしていることをまとめてご紹介します！ 社長岩上が語る、LIGが大切にしていること “結果”だけで判断しない 人間関係もプロジェクトも良い時もあれば悪い時もあります。上手くいく時もあれば、上手くいかない時もあります。それでも、同じ方向さえ向いていれば失敗しても、それを糧に次に活かせばいいと思ってます。 同じ方向を目指していて、LIG
もう同じコードを繰り返さない！SublimeTextのスニペットで快適コーディング！
こんにちは。 小林です。 今日も、SublimeTextの便利な使い方を、一緒に覚えていきましょう。 今回は、「スニペット」についてです。 DreamWeaverやEclipse等のIDEをご利用の方にはおなじみかと思われますが、 まずは、「スニペット」とは何ぞやというところから。 スニペットとは？ snippet 【名詞】 切れ端、断片 切れ端や断片で何ができるのかといいますと、例えば、何かものを作る際に、よく使う部品を簡単に利用出来る様に準備しておくとどうでしょう？とっても効率がいいですよね？ 三輪車を作る時に、タイヤを三つそれぞれ一から作っていたら、大変だし、出来上がりもばらつきが出たりしますよね。タイヤを作るものを準備してポポーンとタイヤを三つつくっちゃいたいところですよね。 こういう考え方でしょうか。 DRYってやつですかね。 DRY【Don’t Repeat Yourself.
Sublime Text2 と Emmet LiveStyleをかけあわせて、爆速でCSS開発☆！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんばんは。小林です。 今回の記事は、下記を利用して開発されている方には、是非読んでいただきたい。 Sublime Text + Google Chrome( 或いはSafari ) そうでない方にもそこそこ読んでいただきたい。 目的としましては、「CSSの開発をより高速に行える環境を作りましょう！」ということなんです。百聞は一見に如かずということで、まずは、こちらのスーパーにエクサイティングなデモ動画を見ちゃいましょう！ 諸般の事情で動画が観れないという方に簡単に説明しますと、Emmet LiveStyle(以下LiveStyleと表記)を使うことで以下のことができます。 リアルタイム更新。Sublime Textでただタイピングするだけで、あたかもブラウザのデベロッパーツールのCSSパネルを弄るかのように、リアルタイムでCSSを更新できる。無論いちいちファイルを保存したりする必要はない
立体的に動く！カッコイイ3D表現のCSS3サンプル5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのももこです。 あっという間に8月が終わってしまい、今年も残す所4ヶ月という事実に愕然としています…。 さて、今回はCSS3を使用し空間的な動きを付けているリッチなサンプルを5つご紹介します。 閲覧の際にはモダンブラウザ（最新のGoogleChromeなど）をご利用下さい。 Animated Books with CSS 3D Transforms https://tympanus.net/Development/AnimatedBooks/ 本にカーソルを当てるとページがパラッと捲れます。 表紙の文言もテキストになっており、更新もし易そうですね。 3D Restaurant Menu Concept https://tympanus.net/Tutorials/3DRestaurantMenu/ レストランで良く見る三つ折りのメニューが開閉します。 高級感を出したい
ノンストレスになり気持よく仕事をするための方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。 ディレクターのあかねです。 夏休みが終わってしまい。。。 夏は終わってほしいけど。。。 休みは続いてほしい。。。 毎日ノンストレスで仕事できれば、どれだけ楽しいか。。。 ディレクターだからこそできる「気持よく仕事をするため」の方法を一緒に考えませんか？ これをすればきっと休みたくない！と思うかも。 1. ”気持よく”とはなんですか？ 「気持ちよく仕事をするため」と書きましたが、あなたにとって「気持ちよく仕事をする」とはなんですか？ 例えば、 コミュニケーションが円滑である 自分の思い描いているものがスムーズにできる 最高のパフォーマンスが出せるチームにいる クライアントに褒められる ……… あなたにとって、「気持よく仕事をするための状態・行動」とはなにかをまず考えてみて下さい。 2. 100点満点中今何点？ 「気持よく仕事をするための状態・行動」考えましたか？ その考えたこと
わずか5分！？ AWSのEC2でクラウドなウェブサーバーを構築してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。五反田の「Clisk（クリスク）」という会社でシステムエンジニアなどをしている芹沢と申します。盟友であるLIGのゴウさんや紳さんと酒を酌み交わしているうちに、LIGブログに記事を書かせていただくことになりました。よろしくお願いいたします。 AWSとは？ http://aws.amazon.com/jp/ AWS（Amazon Web Servicesの略）とは、Amazonが提供しているクラウドサービスの総称で、その中にはさまざまなサービスが含まれています。 EC2（仮想サーバー）、S3（ストレージ）、RDS（リレーショナルデータベース）、CloudWatch（監視）など、たくさんのサービスが提供されていて、それらのITインフラのリソースを、使いたいときに、使いたいものを、使いたいだけ、必要なスペックで、利用することができるのが特徴です。 多くのサービスは管理画面から操作でき
Facebookの仕様変更に立ち向かう！Likeboxの最小幅とURL指定について。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちわ段田です。 ここ最近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
多機能でスタイリッシュなギャラリーを簡単に実装できる！jQueryプラグイン「MixItUp」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 今回は多機能でスタイリッシュなギャラリー用jQueryプラグイン「MixItUp」をご紹介します。 「容量は軽いけれど力強く、美しいアニメーション、ソートやカテゴライズ、フィルタリング、レスポンシブレイアウト対応」…と、プラグインの説明ページから目についた英単語を並べただけでも機能の豊富さが分かって頂けると思います。 各機能の詳細は3パターンのDEMOサイトが用意されていますので、そちらをご参照ください。 MixItUpのDEMOサイトを見る ちなみに商用、非商用問わず使用可能です。 対応ブラウザはGoogleChrome4.0以上、Firefox4以上、IE10以上など最新の状態での閲覧を推奨しています。 スマートフォン、タブレットでもスムーズに動くようです。 IE9で試しに閲覧したところエフェクトは付きませんが、ソートなど機能面は問題なく使えました
さくっと簡単！jQueryでコンテンツをオーバーレイ表示させる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、デザイナーのはやちです✌(´ʘ‿ʘ｀)✌ 梅雨明けの暑さでバテ気味です…この暑さ嫌ですな c⌒っ´ʘ‿ʘ｀)っ はやちは静かに暮らしたい c⌒っ ◞‸◟ )っ そんなこと言ってもこの暑さは和らぎません(◞‸◟) 今回はjQueryで簡単にコンテンツをオーバーレイ表示させる方法をご紹介していきます(◞‸◟) オーバーレイとは ライトボックスのように要素の上に要素を重ねて表示させる方法です 上に重ねる方の要素を半透明にさせて下の要素がうっすら見えるような表現に多く使われます( ˘ω˘)☝ HTML </pre> <div id="overlay"> <p id="text">ｲｪｰｰｲみてるぅ✌(´ʘ‿ʘ｀)✌</p> <p id="close">close</p> </div> <div id="btn">click</div> <pre> ID名overlayはオーバーレイされ
Wordpressでクライアントのためにできる6のこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
WordPressはCMSとして大変多機能で便利な反面、普段パソコンを使い慣れないクライアントにとっては難易度が高め。 メニューや編集画面がごちゃごちゃしていると、記事をひとつ投稿するだけでも一苦労です。 誤動作がないように、出来るだけ使う機能だけを表示させたシンプルな状態にしてあげたいですね。 クライアント側の更新がスムーズに出来るように、納品前にこちらでやってあげたい6つのことをまとめました。 01 カスタムフィールドを設定する ご存知カスタムフィールド。 こちらはいろいろなサイトで詳しく解説されている上、使い方も様々なので、詳しい説明は省かせて頂きます。 下記リンクは、あまりにも有名な機能拡張プラグイン。私も使用時には必ず入れています。 Custom Field GUI Utility 02 記事の複製を出来るようにする WordPressの七不思議。デフォルトでは記事のコピー投稿が
Photoshopで人物の髪の毛を「境界線の調整」を使って簡単に切り抜く方法 | ページ 2 / 3 | 東京上野のWeb制作会社LIG
こんにちは、デザイナー兼フォトグラファーのおまめ （@omame_creator） です。 今回はPhotoshopで写真を切り抜く方法、髪の毛のような細かいものをきれいに切り抜く方法、背景と馴染ませる方法を解説します。 どれも私が試して一番短い時間で簡単にできた方法なので、ぜひ試してみてください！ 独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年3月に編集部が情報を更新しました 「選択とマスク」を使って髪の毛を切り抜く方法 髪の毛を目立たせるため、強めになびかせた
意外と知らない！疑似要素と疑似クラスでできること | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのはるえです。 突然ですが、疑似要素と疑似クラスってありますよね。 私がCSSを覚えたてのときは「は？何これ」って感じで、得体の知れないものを見るような目で使ってました。 「この2つって何が違うの？」「どれが疑似要素で疑似クラス？」「どういうときに使うの？」と何かと敬遠しがちな人も多いと思います。 ですが、この2つを使うことでできることがぐんと広がるので、今では恐縮しながらありがたく使わせていただいております。 疑似要素とは 疑似要素とは、要素内の特定の文字や行に対してスタイルを指定したりするものです。 よく使われる疑似要素 :before{} :after{} :first-letter{} 疑似要素の中でも特に「:before」と「:after」を極めると、CSSだけのデザインの表現幅が一気に広がります。 例えば、LIGブログでも使用している「blockquote
脳に優しいデザインを！「Vertical Rhythm」の基本と実現方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。 どうも近頃はいぬ肌が恋しく、無性にワンコちゃんをなでなですりすりしたくてうずうずしるのですが・・ こういう写真を眺めているだけで心がほわ～っとしてきますよね 久しぶりに記事を書きます。「Vertical Rhythm」と呼ばれているデザイン手法ご存知でしょうか？さり気なく取り入れることで、文章が読みやすくなったり、レイアウトが整ったりすることが期待できるという。 デザインに限った話ではないが、完璧な正解など存在しないと思うので、あくまで一つの考え方として捉えて頂ければと思います。 実例を挙げながら進めて行きますので、「Vertical Rhythm」の考え方とその良さ、便利さをきっと理解してもらえるんじゃないかと思います。 前書き クライアントに「説得力のあるデザイン」を届けよう！ LIGでデザイナーをやってて、よくベテランデザイナーさんにこういう風に言わ
【デザイナー厳選】バナーデザインの参考ギャラリーサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんこんにちは！ Webデザイナーのえびちゃんです。 バナーデザインを作成していると「レイアウトが上手くいかない」「バナーの参考を上手く探せない、ギャラリーサイトも古いのばかり」「最近のトレンドってどんな感じなんだろう？」……などなど、デザインの悩みってたくさん出てきますよね。 そこで今回は、そんなあなたに現役デザイナーがおすすめするバナーデザインの参考サイトをジャンル別に分類して紹介します！ 後半では実際に効果の高かった広告バナーのデザインも紹介しているので、ぜひ参考にしてください。 「ググってわからないこと」が一瞬で解決するかも？ Webの知識を効率的に学びたい、未経験からWeb業界への転職・就職を目指している、誰かに教えてもらいたい……という方へ。LIGが運営のWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」では実践的なカリキュラムで最短6ヶ月でWe
いつまで使えばいい？CSS3ベンダープレフィックスの切り時チェック！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
コーヒーは命の水！もりたです。 css3の正式勧告はいつだろうと指をくわえながら使っている現在ですが、そんな中どうしても使わなければいけないベンダープレフィックス。 全部書き出すとすごくいっぱいあるみたいなんですけど、とりあえず-webkit-と-moz-だけは書くようにしてるよという人は多いんじゃないでしょうか。私のことです。 でもあれってコードが長くなるからめんどくさいなーと思ってる人は多いんじゃないでしょうか。私のことです。 そのベンダープレフィックスっていつ使うのをやめればいいのかなと思ったら、こういうことらしいです。 ベンダープレフィックス（接頭辞）とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。 【中略】 ただし、ベンダープレフィックスは、 草案（Working Draft
photoshopで複数のスライスをリネームしながら保存する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
スライス名を変更せずにスライス名のあとに「_on」とかつけたい時のメモです。 Fireworksだと割と簡単にできることですが、photoshopでボタン画像などを書きだす際に、 スライス名を手動で変更せずに「（スライス名）_on」みたいにリネームしながら画像を書き出したいな～と思っていたのですが・・・。 やっぱできたんですね。でも案外知らない人も多いようなので（自分も含め）メモしておきます。 「Web用に保存」を押したときに出てくるダイアログのここ↓ ここをポチっと押すと出てくる「出力設定の編集」で書き出しのルールを決めることができます。 例えば、「スライス名_on」というルールで書き出したい場合は、以下のように設定 これでいちいちスライス名に_onをつけなくてもリネームしながら画像保存できます。 他にもスライス名や日付など、命名規則は細かく設定できるので、連番なんかもさくっと作れるので
PCの起動が速くなる！フリーソフト「NexusFont」でフォントを管理、整理しよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですが、皆さんのPCには何種類くらいのフォントがインストールされていますか？ ご家庭のPCならそんなでもないでしょうが、デザイナーさんの仕事用PCなら結構な種類があるんじゃないでしょうか。 困ったことに、豊富な種類のフォントをインストールしてると起動時に毎回PCが全てのフォントデータを自動的に読み込んでしまうので、起動時間が長くります。（´Д` ） じゃあどうすればいいのかっていうと、フォントデータを使う時だけインストールして、使わないときはアンインストールすればいいんです。 その作業を普通にやってたら超面倒くさいでしょうが、フォント管理ソフトを使えば楽にできます！ そこで今回、Noh JungHoon氏のフリーソフト「NexusFont」を使わせていただくことにしました。 これを使えば、「フォント
シンプルイズベスト！おしゃれなモーダルウィンドウを実装できる「SIMPLE MODAL」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、ももこです。 おしゃれなWebサイトでコンテンツの表示に、モーダルウィンドウを使うと格好よく映えたりしますよね。 今回はクールなモーダルウィンドウを簡単に設置出来るJavaScript「SIMPLE MODAL」※すでに提供を終了していますをご紹介したいと思います。 「SIMPLE MODAL」 デモ 用意されているデモは全部で8種類あります。 その中でも特に使用頻度が高そうな5つのデモをご覧ください。 ALERT シンプルなアラート風ウィンドウ 商品紹介などに使えそうな基本的なウィンドウ MODAL AJAX AJAXを使用し、コンテンツにアコーディオンを含めているウィンドウ MODAL IMAGE LightBox風に画像を表示するウィンドウ VIDEO EMBED 動画を埋め込んで再生するウィンドウ 記述 ウィンドウ内のテキストや画像は全てスクリプトの中に含めます。 「
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
