拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
ランディングページのデザインまとめサイト11選！デザインを作る際のポイントとは | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、マーケターのまこりーぬです。 Webサイトのランディングページを作成することになったけど、どのようなデザインにしたらよいのかさっぱりわからん……と悩んでいる方も多いのではないでしょうか？ この記事では、Web制作担当者向けに、ランディングページとはなにか、デザイン作る際の注意点やおすすめのデザインのまとめサイトを紹介します！ ランディングページとは ランディングページ（LP）とは、ユーザーが広告・外部サイトなどをクリックした際に、一番最初に訪れるページのことです。一般的には縦長の1枚構成になっています。 ランディングページの役割 ランディングページの役割は、ユーザーに、自社の商品やサービスへの関心を持たせ、商品購入や問い合わせといったコンバージョン（結果）を引き出すことです。ユーザーを他のページに移動させないために、1ページ中に情報を集約する、イメージ画像を多用する、情報を提示
文字デザインの基本装飾10パターンを紹介【参考例あり】
こんにちは、デザイナーの花ちゃんです！ 自社デザインチームで働いています。 LIGに入社してから作成したLIGブログのアイキャッチは300枚を超えました！ 私がアイキャッチを作成する上で最初の難関だったもの…… それは……文字の装飾！！ 前職ではスマホゲームのUI/UXを担当していました。ゲーム内イベントのキービジュアルやバナーを作成する際は、世界観にあったフォントがある程度決まっていたので、その中から合ったものを選択していたのですが……ブログのアイキャッチとなると、毎回記事の内容、書き手のキャラクターによってテイストや組み合わせを変えなくてはなりません。 圧倒的に引き出しが足りない……！ ということで、今回は文字装飾の基本のパターンについて、LIGブログのアイキャッチを参考例に挙げながらまとめてみることにしました！ 現場で活かせるWebデザインを勉強するなら…… Webデザインを徹底的に
未経験でも差がつく！Webデザイナーのポートフォリオの作り方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして！ Webデザイナーのななみんです。 私は大学が工学部で、前職もデザインとは関係のない仕事だったので、未経験からWebデザイナーになるまでにはたくさんの壁がありました。 とくに「ポートフォリオ制作」はもっとも大変でした。 「そもそも載せる作品がない！」「作ったけどなんかイケてない！」と……。 今回の記事では、Webデザイナーのポートフォリオの作り方と、参考になるポートフォリオサイトについて書いていきます。 私のように未経験からデザイナーを目指す方や、ポートフォリオづくりに苦戦している方に参考にしていただけたら幸いです！ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」がおすすめです。Webデザインスクール「デジLIG」では、ポートフォリオに使えるWebサイト制作を0からサポート。プロによるポートフォリオ添削も
Adobe XDまだ使ってないの？こんなに万能なのにもったいない！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、野尻湖オフィスデザイナーのずんこです。長野は紅葉も終わり、雪も降って冬の到来です。 長野の11月から12月の楽しみといえば……そう、新そばです！ 寒い寒いと言いながら、ざるそばを食べる季節。いよいよ年末ですね。 寒いついでに風の噂で聞いたのですが、どうやらまだXDを使うか否か悩んでいる人がいるらしいんですよ。 そんな、まじか…… Adobe XDとは Adobe XD は、ユーザー操作性をデザイン、プロトタイプ化、共有するためのプラットフォームです。ワイヤフレーム、ビジュアルデザイン、インタラクションデザイン、プロトタイプ化、プレビュー、共有間の切り替えが簡単な、オールインワンの強力なツールです。（公式サイトより） そして動作が軽い。 当たり前のようにXDを使っている私にしてみたら信じられない事実です。登壇資料を作るのも、デザイン資料を作るのにも、息をするようにXDを開いていま
Adobe XDなしにはもう生きられない！これからのWebデザイナーのワークフローが変わるかも!? | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 野尻湖オフィス デザイナーのずんこです。 最近追加された新機能を確認してみたら、Adobe XDが大幅アップデートされ、さらに誰でも使える無料プランまで提供されていて、改めてすごく進化していることに気づきました。 今でこそ社内のディレクターもデザイナーもXDを使用していますが、XDがこんなにメジャーになる前に社内にXDを普及させようと書いた記事があります。 これ以降XDを使ってなかったそこのあなた。この進化ぶりには目をみはるはずです！ そしておそらく最近のアップデートのありがたみを一番享受できるのがデザイナーなのではないかと私は思うのです。 なので再び、XDを布教する活動を行おうと思います。デザイナーの皆さん、準備はいいですか？ 軽い、早い、簡単そして安心 まず、Adobe XDはAdobe Creative Cloudを契約していれば、今すぐにでも導入できます。 XDを愛用
愛着が湧く！HyperTermで作るMYターミナル！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです。はやちですよ。 今回はjs、html、cssで作られたHyperTermのカスタマイズをご紹介いたします。 導入方法 HyperTermのサイトから直接DLしてくるか、Homebrew Cask経由からコマンドでDLすることも可能です。 brew update brew cask install hyper Windowsの方はchocolatey経由でDLすることも可能です。 choco install hyper カスタマイズ デフォルトがこのような感じです。こっからカスタマイズをしていきます。 メニューhyperの中のPreferenceから呼び出すか、ショートカットキー⌘,で.hyperterm.jsのJSONファイルからカスタマイズしていきます。 設定プロパティ 以下のことが設定できます。 プロパティ 説明
PhotoshopでWebデザインを効率化するための便利な使い方 | ページ 3 / 3 | 東京上野のWeb制作会社LIG
こんにちは。LIGブログ編集部です。いつも「時間が足りない！」「忙しい」「寝たい……」と思っているWebデザイナーの皆さん、Photoshop作業の時間短縮をしていますか？ Photoshop作業の効率化すれば、余った時間でやりたいことができますよね。そこで今回は、Webデザイナーさんならぜひ使ってほしい、Photoshop作業を効率化する方法をまとめました。Photoshop初心者の方も、そうでない方も、時短できる要素がないかぜひ確認してみてください。 1. ショートカットを使い倒そう 作業時間の短縮を考えたときに、まず思い浮かぶのがキーボードショートカットですよね。知ってるか知らないかで大きな差が出てしまうところでもあります。 ひとつひとつ説明すると長くなってしまうので、おすすめのショートカットについては、かなり詳しく解説されているこちらの記事「Photoshopの効率化におすすめのシ
【オリジナル制作】Photoshopでの作業を効率化できるいい感じのJSXスクリプト | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。「とりあえずタイトルに興味を持ったけどいまいちピンとこなかった」という方もいるのではないでしょうか。 ずばり、Photoshopのスクリプト機能を利用して、表題の作業を自動的に処理させるということです。僕みたいな怠け者で楽をしたい人にはぴったり！ 今回主に紹介したいのは自作のスクリプトで、Webに特化した作業を簡単にしてくれます。 ダウンロードはこちら（ダウンロードが開始されます）： https://liginc.co.jp/demo/2012/09/PhotoshopScripts.zip スクリプトを使うには？ まずはスクリプトの使い方について説明していきます。 スクリプトをダウンロードし解凍したら、拡張子が「jsx」のファイルが幾つか入っていると思います。それらを下記のフォルダにコピーし、PCを再起動させます。 Windows：PhotoshopPre
もうすぐ防災の日。必要な防災グッズと買えるサイトをまとめました | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。 オフィスの増床に伴い、僕たちのチームは違う階に移動したのですが、ちょっとした用事で元の階に行くと「お前の席ねぇから！」や「誰だっけ？」などといった、あたたかい言葉をいただきます。 アドチームのきょうへいです。 8月、9月と連休が続きますね。 夏休みやシルバーウィークに注目しがちですが、9月1日は防災の日に制定されていて「防災の日」を含む1週間は防災週間とも呼ばれています。 巨大地震があった場合は3日分の備蓄や用意が必要だと言われていましたが、東日本大震災以降、巨大地震の場合は最低でも1週間以上の備蓄や用意が必要だと見直されています。 僕は調べるまでそんなこと知らなかったので、今回は防災に関する情報をまとめてみました。 防災時に最低限必要なもの 保存水 富士ミネラルウォーター 非常用5年保存水 http://shop.fujimineral.jp/fs/fujiyama/c/s
そのHTML5のタグは合ってますか？間違えやすいタグ15選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、HTML5カルタ大会という大会で優勝させていただきました。 いやあ、実に光栄です。 そこで今回は、HTML5ネタ繋がりで、“間違えて使ってしまいがちなんじゃないかと思うややこしいHTML5タグ”をまとめてみました。 あ、でも皆さん誤解しないでくださいね。 この記事は大会前にカルタの準備がてら執筆したものなので、決して「このキング・オブ・HTML5こと俺様がレクチャーしてやんよ！」なんてことは1mmも考えておりません。 どうか、一Web制作会社の端くれエンジニアが戯言ほざいてやがるな、まあ暇だし読んでやるかくらいのノリでお付き合いくだされば幸いです。ありがとうございます。 【こちらもおすすめ】 その使い方合っていますか？間違えやすいタグ15選（HTML5対応） “定義”に関わるタグ <dt>,<df
Photoshopで人物の髪の毛を「境界線の調整」を使って簡単に切り抜く方法 | ページ 2 / 3 | 東京上野のWeb制作会社LIG
こんにちは、デザイナー兼フォトグラファーのおまめ （@omame_creator） です。 今回はPhotoshopで写真を切り抜く方法、髪の毛のような細かいものをきれいに切り抜く方法、背景と馴染ませる方法を解説します。 どれも私が試して一番短い時間で簡単にできた方法なので、ぜひ試してみてください！ 独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年3月に編集部が情報を更新しました 「選択とマスク」を使って髪の毛を切り抜く方法 髪の毛を目立たせるため、強めになびかせた
プレゼンが苦手な人へ！あなたの資料が「ガラッと変わる」便利なツールまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆様、こんにちは。メディア事業部のまゆです。 最近はパワポなどを使って資料を作成することが少し増えてきました。外部の方の資料を見せていただくと、「こんな資料を作れてしまうのか……」と思うときが結構あります。 まだまだ勉強中の身ですが「こういうプレゼンができたら楽しそうだな」、「こういう資料を作ってみたい」と思ったプレゼンツールを何個かピックアップしてみました。 では、ご紹介したいと思います。 これは使いたい！プレゼンツール Zoho Docs https://www.zoho.com/docs/show.html オンライン上でプレゼンテーション資料を作成・公開できる完全無料サービス。 PC内にデータを保存していなくても、インターネットさえつながれば、いつでもどこでも利用することができます。作成した資料は.ppt/.pdf形式でエクスポートが可能。.ppt形式のファイルやGoogleドキュ
ランディングページ（LP）はファーストビューで決まる！直帰率を改善するポイントまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ソウルドアウト株式会社のモッチです。 ランディングページで売上アップ！のつもりが、あれ？思うように売れない……。なんてことはありませんか？ それは、ランディングページの基本中の基本が抜けてしまっているからかもしれません。 ランディングページでありがちなミスは？ たとえば、こんなランディングページになっていませんか？ 企業側の言いたいことを詰め込んでいる 商品・サービスと関係性の薄いメインビジュアルを使用している そもそも何の商品・サービスなのかがわからない 今回は、ランディングページの顔であり、売上改善に大きなインパクトを与える「ファーストビュー」にフォーカスして、改善すべきポイントをご紹介していきます。ぜひ、参考にしてみてください。 売上改善のカギ「ファーストビュー」とは？ ファーストビューとは、Webページにアクセスした際に、スクロールせずに見えるブラウザの画面範囲のこと。
LPデザインの参考になるランディングページまとめサイト10選（日本・海外） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近DMM英会話をしている人のツイキャスを見るのが趣味のうららです。 LIGMOのセブヤンとナッツがツイキャス配信を始めたのですが、上司が苦戦しながら勉強している姿を見るとニヤニヤしますね。コメントでチャチャを入れるのが日課となりつつあります。みなさんもぜひチェックしてみてくださいね。 平日は毎日放送するよ！録画もしてるのでぜひ〜♡ 【平日20:00〜20:30】『TOEIC255点の挑戦 #セブヤン英語』@sebu_yan 【平日20:30〜21:00】『ナッツの #チャライングリッシュ 』 @nuts612 pic.twitter.com/QyVTuwWAvF — さえりぐ (@saeligood) 2015, 6月 25 さて、私は最近とあるランディングページ制作に関わりました。 （ちなみに、ランディングページとは1枚で商品やサービスを訴求するウェブページのことで、「LP」とも言いま
いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜
こんにちは、エンジニアなのにダンクができないのびすけです。今月から記事を書かせていただきます。 さてみなさん「Node.js」って知っていますか？ 僕も最近Node.jsの勉強を始めたので「Node.jsを使ったことがないけど使ってみたい」と思っている人に向けて、Node.jsの入門的な内容を紹介したいと思います。 ▼2020年最新版はこちら！ Node.jsとは 一言で言うとアツいJavaScriptです。 通常、JavaScriptはユーザーのブラウザで動作するプログラミング言語ですが、Node.jsはサーバー側で動作するJavaScriptであり、Web業界ではかなり注目されています。大量の処理に対応するために、ノンブロッキングI/Oというモデルを採用しています。 例えば、データベースから大量の情報を取得してWebページ上に表示をする処理をおこなう場合、通常はデータベースへアクセスし
【実例つき】写真編集ソフト「Photoshop Lightroom」の使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ミッション！ ではさっそく、今回のミッションを発表します。 こちらの写真を・・・ こちらの写真に変えるのです！ そもそもAdobe Photoshop Lightroomとは？ 「Photoshop」という単語が入っているけど、「Photoshop」とはどういう関係なの？と、Lightroomが初耳の方なら誰もが首を傾げるでしょう。 公式サイトの文言を見てみましょう。 Lightroom とは何ですか？また、どのような人を対象としていますか？ Adobe Lightroom は、初心者からプロフェッショナルまで、あらゆるレベルのユーザーが写真に必要なすべてのツールを搭載しています。Lightroom は、コンピューター、Web、iPad、モバイルデバイスなど、どこにいても写真を整理、編集、共有できます。お気に入りの写真を編集したり、フラグ付け等の作業をしても、他のデバイスにも全ての編集作業
イラストを効果的に使用しているデザインがいい感じのサイト10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの藤田です。 先日、がっつりイラストを使用する案件を担当して以来、デザインにイラストを取り入れているサイトが気になっております。 図版を入れる箇所に写真を使用するのが困難だったり、写真を入れるとデザインが説明的になりすぎて雰囲気が薄れたりする場合に、イラストやアイコニックな表現を行うことはよくあります。 今回は、その表現方法が素敵だなと感じたサイトをまとめてみました。 イラストを効果的に使用しているサイト10選 写真を愉しむ家 &ima (アンド イマ) http://and-ima.jp/ トップページにて「STUDIO、LIVING、KITCHEN」の3つの機能訴求の補助としてイラストを使用しておりますが、こちらのイラストがあることで訴求対象が「子どものいる家族」であることが一目でわかるようになっております。 素敵です。 株式会社秋田屋 http://www.ak
賃貸物件や中古マンションがもっとオシャレに！リノベーション会社サイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、うららです。突然ですが、みなさんはどんなお家にお住みですか？ 私は実家暮らしですが「独り暮らしをするならオシャレな部屋に住みたいな〜」とか「もし将来結婚して旦那さんと一緒に住むならかわいい家がいいな〜」なんて妄想をよくします。でも、現実にはいろいろと問題が多く、特におしゃれな物件って割高だったりするんですよね。 そんなとき出会った言葉が「リノベーション」です。みなさんはリノベーションという言葉をご存知でしょうか。 リノベーション（renovation）とは、既存の建物に大規模な改修工事を行い、用途や機能を変更して性能を向上させたり価値を高めたりすること。マンションの一部屋から一棟、また、木造・RC造・鉄骨造等、特に構造に関係なく行うことが可能。 住宅リフォームとも混同されるが、リフォームは老朽化した建物を建築当初の性能に戻すことを言い、壁紙の張り替えなど比較的小規模な工事を指す
いい感じにコーディングを爆速化できるフロントエンド開発環境をリニューアル | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近は少しずつCTO業務に取りかかれるようになってきました。やっぱり夏は忙しくなりそうです。こんにちは、先生です。 以前「エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順」という記事でフロントエンドの開発環境を作ったものを紹介しましたが、やはり変化の流れが激しく、この環境も少しずつ変化していきました。 今日は新しくなった環境をご紹介します。このまま使ってもいいですし、一部を取り入れてもいいと思います。 おさらい「爆速化できる環境」とは？ フロントエンド開発（コーディング）を早く終えるための環境で、以下のような機能を持ったテンプレートです。 外部テンプレート（EJS） SASS HTMLバリデーション ユニットテスト スプライト画像&SCSS生成 スタイルガイド生成 JS/CSSの圧縮 ES5で書ける（ES5非対応ブラウザへの自動対応） LiveReload（ファイルを更
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
