本当に役立つ配色サービス30選。配色難民の新人デザイナーに捧ぐ
こんにちは。 ジャスの意味がわかるやつは大体友達。Webデザイナーのミライです。仙台出身です。 私は入社当初から約1年、LIGブログの「アイキャッチ（記事サムネイル）」「バナー」「背景ジャック（大型バナー）」を制作しており、制作の回転数が多いこともあって、配色でぐるぐると悩むことがよくありました。 そのときにカラーリングの参考になるサービスサイトを手当たり次第に調べて、ためていたものを紹介します。けっこう量があり、ひと通りの配色系ツールを押さえているので、ブックマークしておけばきっと役に立つことでしょう。 配色に悩んで脳内、インターネット砂漠をぐるぐるとさまよい歩いたあなたの旅もここで終わりです。仕事はさっさと終わらせて、早く帰って寝るのです。 はじめに 説明を読めないほど疲弊しているあなたのために、評価の軸を立てました。 見やすさ 特異性 掲載数 です。 個人的な観点ではありますが、サク
particles.jsを使って簡単に幾何学的なアニメーションを作る | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして！ 8月にLIGに入社しましたフロントエンドエンジニアのゆたろです。 今後ともよろしくお願いします。 さてさて、今回は簡単に幾何学模様のアニメーションが作れるparticles.jsについて紹介したいと思います。 particles.jsを使ってみよう まず下記よりプラグインをダウンロードしてください。 ダウンロードしたzipファイルを解凍して、中からparticles.jsまたはparticles.min.jsを取り出します。 http://vincentgarreau.com/particles.js/ 次に下記のソースをコピペして、別ファイルのJSとして保存してください。 （当記事ではsetting.jsとします。） particlesJS('hoge',{ "particles":{ //--シェイプの設定---------- "number":{ "value":80
コーディング中のクラス名で迷いたくない！よく見るコンポーネントの名前17選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングをしていて、クラス名に迷うことってありませんか？ ボタンや見出しといった、比較的単純なコンポーネントなら「.button」「.headline」など、すぐに思いつくかもしれません。 しかし、それが複雑なコンポーネントだったりすると、なかなか思いつかないものです。 そんな悩みを解消したいと思いまして、いろいろなサイトのソースコードを見て、開発者がどんなクラス名をつけているのか調査してみました。 今回は、その中からよく使われていたクラス名と、「これはナイスネーミング！」と思ったクラス名をピックアップしたいと思います。 thumbnail サムネイル画像。 アイキャッチ画像やギャラリーページの画像一覧などで用いられます。 avatar ユーザのアバター画像。 Webサービスのユーザ情報ページや、ブ
美しいWebデザインをタイプ別に！見ないと損するパーツ別ギャラリーサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
中型ライダー（二輪）免許を持っているライターの内藤です。 本日は、ライダーキック並みの強烈さで役に立つ見本サイトをまとめてみたいと思います。 Web屋さんはご存じの方も多いかもしれませんが、ブログをしている一般の方、Webデザイン・DTPに興味のある方、お店を持っている方なども必見です！ 部品に特化した見本 部品に特化した見本サイトをご紹介します。 見出しデザイン（h1,h2,h3……その他DTPでも） はじめは見出しデザインに特化した見本サイトまとめ。 見出しデザイン.com http://midashi-design.com/ 見出しタグ（h1,h2,h3……）のデザインの見本ですが、DTPなどでもヒントになるものがたくさんあります。 カテゴライズは、グラデーション・テキストのみ・テキスト非画像・上線・下線・丸・四角・囲み線・斜線・点線・角丸。 ヘッダー部分に凝っても見出しが適当だと全
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
デザインの参考にしたい！404エラーページ（not found）33選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
404（Not Found）と表示されるエラーページってあまり見ないですよね。 404ページとは、サーバに接続できたものの、要求に該当するページ情報がサーバが見つけられなかった場合に表示されるエラーページです。 エラーなので普段目にすることは無いのですが、ふとしたタイミングで見た時にカッコ良くデザインされた404ページだと、「ここまでこだわるのか！！」と、サイトの好感度が上がります。 そんな小技の効いた404ページをピックアップしてみました。 404ページデザイン 33選 1. BLIZZARD ENTERTAINMENT https://us.blizzard.com/en-us/error.html 2. Henrik Hedegaard https://henrikhedegaard.com/404/404.html 3. DIL BERT https://www.dilbert.c
生粋のWinユーザーがMacにすんなり馴染める！便利な無料アプリや、設定まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、目の前の窓から冷気が吹き込んでこの席寒い。もりたです。 LIGブログでは毎月アクセス解析を公開しているのですが、そういえばOSの情報は載ってなかったですね。 LIGブログを見ている人たちはWindowsとMacどちらのほうが多いでしょうか。 私は家ではWindowsですが、純正モニタの画面が綺麗なのとカラーマネジメントをそれほど気にしなくていいという理由から会社ではMacを使わせてもらってます。 でもやっぱりOSが違うといろいろ勝手が違って困りますね。 というわけで今回はWinユーザーがMacに馴染むためにまず入れておくべきアプリケーションや覚えておくと便利な設定などを紹介してみます。 ちなみにアプリは全部無料です！（2013年1月時点） とりあえず最初に 拡張子を表示させる 本当にWinからMacに移行するならデータの移動などなど、Winで作ったファイルをMacに入れることも
無料で商用利用可なフリーアイコン素材サイト13選【デザイナー厳選】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの花ちゃんです！ Webサイトのデザインをしていると、アイコンを取り入れる場面がよくあると思います。アイコンには文字だけではわかりにくい情報を、ユーザーに対して直感的に素早く伝える効果があります。また、モチーフを簡略化しているので、限られたスペースでもしっかりその機能を果たしてくれます。 今回は、Webサイトはもちろん、図版や資料作成にも欠かせない、無料で使えるアイコン素材サイトをテイスト別にまとめてみました！ 独学でつまずいていませんか？ Illustratorの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2
「Sublime Text」 完全入門ガイド！
こんにちは～ 仕事が恋人のデザイナー、王です φ(≖ω≖｡)♪。 最近海外でもてはやされまくりのテキストエディタ「Sublime Text」と恋に落ちたことをこの場で告白したい！ やっと出会えたぞ！僕が探し求めていた幻のエディタに！！ 昨今話題沸騰中の「Sublime Text」エディタについて、ご紹介しましょう！本記事を読んで、ぜひとも他のエディタからSublime Textに乗り換えていただきたいです！ 見た目的には、このように、優雅（Sublime）そのもの！ Mac、Windows、Linux 三大プラットフォームで動くのも嬉しいですな！ 公式サイトは下記リンクです。 https://www.sublimetext.com/ それでは、動画やキャプチャーを使ってSublime Textの素晴らしい魅力を伝えていきたいと思います。 Sublime Textのチャームポイント 特色機能
Illustratorでモザイク柄を球体に貼り、ミラーボールを作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
※編集部注:この記事は、2012年に公開されたものを再構成・編集したものです。 1. Photoshopでミラーボールの模様を作る まずはPhotoshopのブラシツール（B）でポチポチドットを打っていきます。ミラーボールのギラギラした模様になる部分です。 面倒であれば上記の画像を保存して使ってください。 2. Illustratorにドットを移す 1で作成した画像をIllustratorに移動させます。 Illustratorに移す手順 Photoshop上ですべてを選択 ⌘+A Photoshop上でコピー ⌘+C Illustratorに貼り付け ⌘+V 3. 画像をモザイク状にする 続いて、画像をモザイク状にします。 ダイレクト選択ツール（A）で画像を選択してから、「オブジェクト」→「モザイクオブジェクトを作成」をクリックします。 タイル数は縦と横の幅が等しくなるように調整します
【オリジナル制作】Photoshopでの作業を効率化できるいい感じのJSXスクリプト | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。「とりあえずタイトルに興味を持ったけどいまいちピンとこなかった」という方もいるのではないでしょうか。 ずばり、Photoshopのスクリプト機能を利用して、表題の作業を自動的に処理させるということです。僕みたいな怠け者で楽をしたい人にはぴったり！ 今回主に紹介したいのは自作のスクリプトで、Webに特化した作業を簡単にしてくれます。 ダウンロードはこちら（ダウンロードが開始されます）： https://liginc.co.jp/demo/2012/09/PhotoshopScripts.zip スクリプトを使うには？ まずはスクリプトの使い方について説明していきます。 スクリプトをダウンロードし解凍したら、拡張子が「jsx」のファイルが幾つか入っていると思います。それらを下記のフォルダにコピーし、PCを再起動させます。 Windows：PhotoshopPre
印刷にも対応！imgタグでCSSスプライトを使う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です(●´⌓`●) 今回は「imgタグでCSSスプライトを使う方法」について説明します。 そもそもCSSスプライトって何ぞや？という方は、下記ページに詳しく説明されているので、見てみてください。 CSSスプライトで画像を円滑に表示させる – Webクリエイターボックス： https://www.webcreatorbox.com/tech/css-sprite/ どうしてわざわざimgでCSSスプライト？ 一番の理由は、imgタグなら印刷したとき印刷物に反映されるからです。 対比画像の、フォーム下部のボタンに注目してください。通常のスプライトでは印刷に反映されないんです。 ユーザ側で印刷の設定をいじればbackground-imageでも印刷できるんですが、やはりデフォルトでできた方が親切ですよね。(●´⌓`●) 便利なテクニックなので、覚えておきましょう！ CS
いつまで使えばいい？CSS3ベンダープレフィックスの切り時チェック！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
コーヒーは命の水！もりたです。 css3の正式勧告はいつだろうと指をくわえながら使っている現在ですが、そんな中どうしても使わなければいけないベンダープレフィックス。 全部書き出すとすごくいっぱいあるみたいなんですけど、とりあえず-webkit-と-moz-だけは書くようにしてるよという人は多いんじゃないでしょうか。私のことです。 でもあれってコードが長くなるからめんどくさいなーと思ってる人は多いんじゃないでしょうか。私のことです。 そのベンダープレフィックスっていつ使うのをやめればいいのかなと思ったら、こういうことらしいです。 ベンダープレフィックス（接頭辞）とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。 【中略】 ただし、ベンダープレフィックスは、 草案（Working Draft
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
