デザイン上達の秘訣は「文字の扱い方」！テキストを読みやすくする5つのポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ デザイナーのまきこです。 わたしは以前、著名なアートディレクターの方に「デザインがうまくなるにはどうしたらいいでしょう？」と、大変にストレートな質問をしたことがあります。そのときいただいたのは、「文字の扱いがうまくなると、デザインがうまくなるよ」という言葉でした。 あれから何年か経ちますが、ふとその言葉を思い出すことがあります。そして、「あのときはあんなふうに言われたけど、たいしてうまくなってないなあ」と、ぼんやり考えてから、また作業に戻っていく。と、ここまでが、去年までのわたしのいつものパターンでした。 でも、2016年のわたしはちょっと違います。ちょうど昨日、「文字の扱いがうまくなると、デザインがうまくなるよ」という言葉をまた思い出しました。そこで、「あ、これ、ブログにしよう」と思い立ったわけです。 今回はデザインにおける文字の扱い方の中でも、わたしが普段意識している、「
Webサイトの見出しデザインまとめ13選！デザインの参考に | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの藤田です。 デザインをやっていると、見出しのデザインに悩むことって結構ありますよね！ 自分のデザインストックを増やすためにも、今回のブログでは今っぽい見出しデザインをタイプ別にまとめてみました！ 独学でつまずいていませんか？ 現場で活かせるWebデザインを効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。 詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） ※この記事は2022年3月に編集部が情報を更新しました ジャンプ率パターン ミニマムなデザインでは見出しに過度な装飾を加えずに、本文に対し見出しの文字サイズを大きくすることで見出しを目立たせるサイト
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
センスが光る。大阪府でイケてる仕事をしてるHP制作会社まとめ12選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まいどおおきに！ 株式会社LIGの鮫島です。 今回は「大阪府」にあるイケてるホームページ制作会社を12社を調べて比較してみました。どれもレベルの高い会社ばかりですので、Web制作会社選びのご参考に 💡【厳選】全国の大手Web制作会社8選はこちらの記事から 大阪ではないけど…… 弊社株式会社LIGは2007年設立の、東京都のWeb制作会社です。 年間150サイトリリース、毎年複数のデザインアワードを受賞する実績で、他者から抜きん出た、訪問した瞬間に貴社の魅力がズバッと伝わるWebサイトを制作します！ 打ち合わせなども全てオンライン対応しておりますので、どうぞお気軽にご相談ください！ 💡LIGのWeb制作詳細・実績 大阪のイケてるWeb制作会社12選 株式会社ZIZO 「ワクワクする事をひとつでも多く」というビジョンのもと、Webサイト制作・Webサービス運営をはじめ、アプリ、グラフィック
海外のハイクオリティなフリー写真素材サイト11選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Webサイト制作時には、写真素材サイトが必須ですよね。クオリティの高いものを選べば、それだけでサイト全体の印象もぐっとよくなります。 本日は、Webサイト制作時に使える高クオリティな海外のフリー写真素材サイトを紹介します。 頑張って他の記事とかぶらないものを選出してみたつもりです。（かぶっていたらゴメンナサイ。） どれもオシャレなので、Webサイト制作時だけでなく、ダミー写真や写真を撮る際の参考などにもお使いください。 無料で商用利用可能のものを集めていますが、僕の翻訳能力が怪しいので、ライセンスはご自分でお確かめになってからお使いください。それでは、どうぞ。 ※編集部注：この記事は2014年9月に公開されたものを、最新情報を元に再構成・編集しています。 写真編 New Old Stock https://nos.twnsnd.co/ サイト名のとおり、クラシックな作品を揃えており、単純に
コーダーがおさえておきたいコーディングのツール8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 昨今ではWebのフロント周りを取り巻く環境が激変しています。 Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。 そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でもおさえておきたい、今旬な技術やツールを紹介したいと思います。 コーディングに関わる人ならおさえておきたい必須のフロント技術＆ツール8選 1. タスクランナー フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。 JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイル
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
専門知識不要で瞬時にWebサイトのクオリティチェックができるツール7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 非エンジニアの皆さんに朗報です。本日はWebサイトのクオリティチェックに関するすごいツールをたくさん紹介します（どーん）。 Web制作に関わるディレクターや担当者は、ソースコード自体は書かなくとも、イメージ通りのものができているかのどうかの確認はされていると思います。 しかし、パフォーマンス、SEO対策、ソースコードの整合性などの裏側までが「ちゃんとできているのか」というのはわかりにくいですよね。エンジニアに「いや、完璧ですけどこれ？」ってどや顔されたら頷くしかないと思います。 そこで今回は、知識がなくともその辺りのクオリティチェックが簡単にできるツールを紹介します！ これらを使えば、ざっくり「完璧」「まあまあ」「ヤバい」くらいの判断ができるので、作業者にツールの結果画面を見せて「なんとかして！」と伝
ハイクオリティなフリー素材がPSD形式でダウンロードできるサイト20選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのサリーです。 フラットデザインが流行してから、アイコンやモックアップ素材を使う機会が以前より多くなったように感じます……。 素材をダウンロードしたとき、編集がラクチンだと助かりますよね。 今回はPSD形式などのまま素材をダウンロードできる、とっても太っ腹なサイトを20個ご紹介します。 PSD形式のフリー素材を配布しているサイト GraphicBurger http://graphicburger.com/ 無料と有料の素材がごちゃ混ぜなのでご注意。 緑の「Download」ボタンが「Visit download page」となっている場合は有料素材です。 365psd http://365psd.com/ 日本でも有名なフリー素材サイト。 365個一気にまとめてダウンロードできる有料パックもあります。 Pixeden http://www.pixeden.com/
エンジニアが教える！Movable Typeのテンプレート制作例 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、エンジニアのしょごです。どうでもいいこだわりとしてカレー作りに力を入れています。 ルーは卒業してカレー粉からの制作に乗り出しつつ、いずれはオリジナルブレンドカレー粉を配合してやろうと企む毎日です。現在ではカレールーから作るよりも短時間でおいしいものを作れる程度にはなりました。 さて、いよいよMovable Typeのテンプレート制作方法のお話。簡単な制作例をあげますので参考にしてください。 サイト構成からテンプレートの組み方を考える 下記のような構成のサイトがあるとします。ここにMovable Typeを導入して新着情報を更新できるようにしてみます。 まずはウェブサイトを作ります。ウェブサイトのURL設定はhttp://shogotan.com/としますが、最初のインストールのときにこの辺は終わってると想定します。 引き続き、新着情報用ブログを作ります。ブログのサイトURL設定はh
レース素材などが豊富なガーリー素材サイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの白浜です。 前回「ガーリーなデザインがしたい！おすすめのサイト＆テクニックまとめ」を書いたのですが、まだまだご紹介しきれなかった素材サイトがあったので、part2を書きました！ 引き続き、ガーリーなデザインに興味がある方はぜひチェックしてみてください。 ブラシ編 Photoshop用ブラシ ガーリーなブラシ素材、実は結構あります。まずはPhotoshopから。 無料(フリー)素材「レース（ライン）のPhotoshopブラシ素材」 http://webworkkit.minibird.jp/photoshop/brush/lacelinebrush.html シンプルで使い勝手の良いPhotoshop用のレースブラシです。種類も5つあるので雰囲気に合わせて使えそうですね。 こんな感じでブラシの間隔を調整すればビーーーっと継ぎ目のないレースのラインが引けます！ ちょっと
ガーリーなデザインがしたい！おすすめのサイト＆テクニックまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの白浜です。 今回はガーリーなデザイン制作のためにチェックしておきたい素材サイトやテクニックをご紹介したいと思います。 素材編 デザイン枠、飾り罫素材専門サイト「フレームデザイン」 http://frames-design.com/ かわいい飾り枠がいっぱい！ デザインにフレームを取り入れたいと思ったとき、とりあえず覗きに行ってしまいます。 pngとaiデータが揃っていてうれしいです。大変お世話になっています。 吹き出し素材専門サイト「フキダシデザイン」 http://fukidesign.com/ 当ブロクでも何度か紹介している定番サイト様ですが、ゆるふわなサイトには吹き出しがつきものですよね！ こちらもaiデータを配布されています。 ガーリー素材 | 無料フリーイラスト素材配布サイト http://girlysozai.com/ 可愛くてクオリティの高いイラスト素
Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも〜こんにちはぁ！ Web制作者として日々勉強中でありますライターの、のび太です。 先日「Webが学べる海外サイト10選」をご紹介させていただきましたが、もちろん国内サイトでも、Webに関してガッツリ学べる有益なブログはたくさんあります。 国内サイトでは、およそ80ぐらいのWeb系ブログをRSS購読させてもらっていますが、今回はその中でも厳選に厳選しまくった「これはWeb屋なら絶対必須でしょ！ もはやお金取られてもいいレベルや！」って感じた10個をみなさんにシェアしたいと思います。 また、大変恐縮ながら、個人的にベスト3だと思った記事（特に有益だと思った記事）も一緒にご紹介させていただきます。 【こちらもおすすめ】 ☞ Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 Webクリエイターボックス http://www.webcreatorbox.com/ あまりにも
ブックマークレット10選
こんにちは、デザイナーのサリーです。セブ島のお土産に名物のシニガンスープの素をたくさん貰いました。 シニガン？な私は裏面（おそらくフィリピン語）を見てもさっぱり作り方がわかりません、クノールなのに… パッケージイラストとクックパッドを頼りにどうにかこうにか料理してみようと思います。 今日はデザインやコードをチェックするのに便利なブックマークレット10個を紹介します。 デベロッパーツールやブラウザの拡張機能を使った方が良さそうだと思ったもの、個人的に使いづらかったものは除外して、実用性のあるブックマークレットを選んでみました。 「ブックマークレットってなんだろう？」な方に説明をしておくと、 ブックマークレット 通常ウェブブラウザでブックマーク（お気に入り）を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選ん
Sassを極める！デザイナーがすぐ実践できる基本テクニック12連発 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 前回、これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)というSassの基礎に関する記事を書かせていただきました。 そこで今回は、もう一歩つっこんでもっと使いこなせるようになろう！という趣旨のもと、ちょっと使えるようになったからっていい気になっている僕がSassのテクニックやら関数をまとめてご紹介いたします！ たくさんある機能の中から、今回は比較的簡単で実用性の高いものをチョイスしました。 目指せSassマスター！WEBデザイナーもコーダーもすぐに実践したくなるSassの基本テクニック12連発もくじ もくじ テクニック1 アンパサンド（&） テクニック2 演算 テクニック3 round() テクニック4 rgba() テクニック5 コメントアウト テクニック6 変数 テ
LIGデザイナーオススメの便利なWEBサービス・ツール＆サイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザイナーチームマネージャーのひろです。 最近、息子のアンパンマンのハマり具合に困惑しています。 アンパンマンが、画面に現れるやいなや大興奮。 軽い近所迷惑状態です(@_@;) クリスマスプレゼントは、間違いなくアンパンマングッズでしょうね（笑） さて、今回は、LIGのデザイナーが、普段からWeb制作を行うにあたり、便利に活用しているWebサービスやWebサイトを紹介したいと思います。完全保存版です！Bookmark間違いなしです！！ デザインするときに役立つWEBサービス５選 960 Grid System 横幅960px用にグリッドが引かれたpsdを何パターンかDLできるWebサービス。 http://960.gs/ Gridulator グリッドデザインには必須のグリッドラインを手軽に作れちゃうWebサービス。 PNGを書き出せるのでとても便利です！ http://gridulato
美しいWebデザインをタイプ別に！見ないと損するパーツ別ギャラリーサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
中型ライダー（二輪）免許を持っているライターの内藤です。 本日は、ライダーキック並みの強烈さで役に立つ見本サイトをまとめてみたいと思います。 Web屋さんはご存じの方も多いかもしれませんが、ブログをしている一般の方、Webデザイン・DTPに興味のある方、お店を持っている方なども必見です！ 部品に特化した見本 部品に特化した見本サイトをご紹介します。 見出しデザイン（h1,h2,h3……その他DTPでも） はじめは見出しデザインに特化した見本サイトまとめ。 見出しデザイン.com http://midashi-design.com/ 見出しタグ（h1,h2,h3……）のデザインの見本ですが、DTPなどでもヒントになるものがたくさんあります。 カテゴライズは、グラデーション・テキストのみ・テキスト非画像・上線・下線・丸・四角・囲み線・斜線・点線・角丸。 ヘッダー部分に凝っても見出しが適当だと全
Photoshopで写真を手書きの鉛筆画風に加工する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。絵を描くのが趣味です。 最近は絵を書く時間が全く持てなくて困っています……。 どうにか早く描けないものかと悩んだ末、表題の通り、「写真から絵を作ってしまおう」という結論に至ったわけです。 折角だし、絵が描けなくて困っている方たちにも役に立つテクニックなのではないかということで、やり方をさくっと説明してみたいと思います。 【こちらもおすすめ】 ☞ Photoshopで初めて写真加工をするときに知っておくべき基本手順まとめ 素材写真を用意する 鉛筆画らしく見せるためには、まず写真を切り抜いておきましょう。 アウトラインを抽出 次に、以下のステップを踏んで、アウトラインの抽出を行います。 cmd + Jでレイヤーを複製します。 cmd + Iで反転させます。 Shift + Alt + D で 描画モードを「覆い焼き」にします。 「色相 ・ 彩度」の調整レイヤーを
「Tumblr.」の使い方
こんにちは。編集部のぐっさんです。 今回は、Tumblr初心者の私が、過去に公開したTumblr記事を再編集し、最新版に更新してみました。……え？ ちゃんと説明できんのかって？ 大丈夫です。正しい情報をみなさんにお届けするため、Tumblrマスターの知人を２時間拘束し、記事を書き上げました。 以下より、私のTumblrに対する基礎知識の少なさと、Tumblrマスターの情報の正確さを兼ね合わせた内容で、Tumblrの使い方をお届けいたします。 Tumblrとは？ https://www.tumblr.com/ Tumblrとは、アメリカのDavidville.incが運営する、世界中で注目のブログサービスです。日本ではあまり認知度が高くありませんが、デザイン性のよさやブログをベースにしたコミュニケーションができることで、一定のファンがいるSNSといえます。 「リブログ」という、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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
