互い違いレイアウトの組み方〜レスポンシブ編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ はっちゃんです。 今回はコーディングであるあるの「互い違いレイアウト」の組み方をご紹介します。 レスポンシブ対応で、SP表示時には縦並びになるようにします。 要件 PC表示 ブラウザ幅が769px以上だったらPCレイアウト表示 互い違い SP表示 ブラウザ幅が769px未満だったらSPレイアウト表示 均一に縦並び flex-directionで並びを入れ替える それでは早速組んでいきましょう。 互い違いには、Flexboxのflex-directionを使用します。 See the Pen Alternate Layout1 by k_hatsushi (@hatsushi_kazuya) on CodePen. メディアクエリでSP時にはFlexboxを解除 Flexboxを解除するだけで、DOMを書いた順に縦に積み上がっていきます。 See the Pen Alterna
Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 以前、デザイナーもりたの、デザイナーとフロントエンドにちょっと優しい「PSDルール」を考えてみたという記事が公開されましたね！ こんな風に、最近LIGのデザイナー＆フロントエンド間では、いかにお互いの仕事をスムーズにするかという話題が増えています。 まだまだ模索中ではありますが、今回は、これを知っておけばお互いにとってハッピーなのでは？というPhotoshopの機能や工夫の豆知識をご紹介したいなと思います。 フロントエンドの方にぜひ知ってもらいたい！というのはもちろんですが、デザイナーの方もこれを読んで気遣いがチラ見えするPSDを作れるようになったら、明日から職場の空気が和やかになるかもしれませんね。 その気遣い、伝わってないかも。 デザイナーは普段Photoshopを使っていて自分の使いやすいようにプラグインを入れていたり、さまざまな機能を駆使してい
記事広告の料金相場やPV数を徹底比較【2022年版】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。PRチームでメディアディレクター（エディター）をしているやぎです。私はふだん、所属するチームでこのLIGブログに掲載する、さまざまな企業の記事広告の制作をしています。 おそらく今、PR手法の候補の一つとして記事広告を検討している方が、この記事を見ていることと思います。そもそも、「記事広告のメリットや解決できることって何だろう？」という方は、まずは概要をまとめた下記の解説記事をご覧ください。
WACUL垣内氏に聞く！3万サイトを分析したプロが教える・知られざるLPの必勝法とは？ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、まこりーぬ（@makosaito214）です。ホットリンク飯髙さんに続き、またまたマーケティング界の大先輩へ取材することに成功しました！！！ 今回は……今回も……Twitterで追いかけてきた…… 株式会社WACUL・取締役CIOの垣内勇威さん（@yuikakiuchi）です！ 垣内 勇威 さん東京大学経済学部卒業後、株式会社ビービット入社。大手クライアントのWeb改善コンサルティングに携わる。2013年株式会社WACUL入社。AIでWebコンサルをSaaS化したWebマーケティング改善ツール「AIアナリスト」を生み出し、現在は取締役CIO（Chief Incubation Officer）兼WACULテクノロジー＆マーケティングラボ所長として、さらなる新規プロダクトの創出を担当。 垣内さんといえば…… 最近、様々な業界のLPのデータを比較し、画面要素とCVRの関係を見ている
一手間加えてクオリティを上げる！Illustratorを使ったロゴデザインのテクニック【実践編：GOOD TABLE】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
2021年1月20日追記：当記事でご紹介しておりますGOOD TABLEは、2019年に営業を終了いたしました。今までご愛顧いただきましたお客様に、深く御礼申し上げます。 こんにちは、デザイナーのゆうこです。 春になりましたね。ぽかぽか暖かいので、散歩をしたり、引越したり、なにか新しいことを始めたくなります。 新しいことといえば、3月11日（月）にLIGが運営する飲食店「GOOD TABLE」が新しくオープンしました。 オープンするにあたり、GOOD TABLEのロゴ、看板、名刺、メニューなど、デザインを一通り担当しました。ロゴは3つの案が採用され、用途によってそれぞれ使い分けることになりました。 今回は採用されたGOOD TABLEのロゴ制作の流れを、実践編としてご紹介したいと思います。 案1. ENGLISH TYPE 英語の活字から作られているロゴタイプです。 まず今回制作を進めるに
Illustratorを使ったロゴ作成テクニック！クオリティアップの一手間を解説
こんにちは、Webデザイナーのゆうこです。ふだんの業務でロゴ制作を担当させていただくことがよくあります。 ロゴ制作って楽しいですよね。自分が作ったロゴが会社やお店で使われているのを見ると、嬉しくてわくわくします。 今回はロゴ制作の過程と、デザイナー初心者の方でもすぐに使える、Illustratorでのロゴデザインの小ワザをいくつかご紹介したいと思います。 デザインの世界に飛び込んでみませんか？ 「プロから学びたい」、「クリエイティブな仕事がしたい」……という方は「スクールでの勉強」もおすすめです。デジLIGでは、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と、手厚すぎる就職支援が特徴！ぜひ一度詳細をチェックしてみてください 👉「デジタルハリウッドSTUDIO by LIG」詳細へ 👉スクールの概要が詳しく分かる資料のご請求はこちら！ 💡ロゴ制作会社お
【2018年WordPress魔改造TOP3】第2位：カスタム投稿アーカイブページのメインクエリに分岐点を作り、前後で順序のルールを変える | 東京上野のWeb制作会社LIG
TOP3を別記事として出してしまうあたりに、今後のキーワードヒットを狙いたい思惑が丸見えですね。 ……どうも。バックエンドエンジニアのリョウタです。年末の予定といえばライブとスタジオくらいのものなので、GutenbergをやっつけるべくReactの独習に励もうと思っています。 さて、本題に入りましょう。前回からスタートした「2018年のWordPress魔改造TOP3」ランキング。 第2位：カスタム投稿アーカイブページのメインクエリに分岐点を作り、前後で順序のルールを変える 何のことやら要約では伝わりにくですが、「メインクエリに分岐点を作り、前後でorderbyのルールと、orderの順序を変えたい。」ということになります。 仕様・要件 対象はカスタムフィールドにdateとtimeを持つ、イベント系投稿タイプのアーカイブページ（運用中の追加機能実装でしたので、dateとtimeを統合するの
「コンテンツマーケティング無料相談会2018」開催レポート〜こんなご相談を承りました！〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
さて今回は、オフィス移転前ラストイベントとして10/25〜11/9に実施した「コンテンツマーケティング無料相談会」の開催レポートをお届けします。 どんな相談会だったのか コンテンツマーケティングを積極的に実践しつつ、クライアントのコンテンツ制作支援も行っているLIGメンバーが、みなさまのマーケティングに関するお悩みを承ります！ ……という「コンテンツマーケティング無料相談会」。1社につき約1時間、じっくりとお話をさせていただきました！ 上野オフィスで開催する最後のイベントということで、心なしか看板にも哀愁が漂っています。 どんな企業様にご参加いただいたのか マーケティング担当者様を対象とした相談会は実はこれがはじめて（？）で、一体どんな反響があるのやら……とドキドキしながらリリースした企画だったのですが、想像を大幅に上回るご予約をいただきました！ 参加企業数、なんと45社！！！！！ 本当に
ぶっちゃけ、途上国での働き方ってどうなの？カンボジアで1ヶ月働いて感じたこと。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
前回のブログを書き終えた後、さっそくお腹を１週間ほど壊しました。。これも異国で働く洗礼だと思い、耐え忍んでいます（ちなみに、下痢止めを飲んでしまうと毒が体内から出ていかないので、なるべくそういうのは使わないほうが良いらしいです）。 さて、カンボジアで働き始めてから１ヶ月ほど経ったので、他メンバーから聞いた話や彼らの想いも含めつつ、ここまでに感じた「途上国スタートアップでの働き方」についてお話できればと思います。 どんなところで働いてるの？ こちらが、私が働いているラストマイルワークスのオフィスが入っている複合施設「Factory Phnom Penh」です。 もともと工場が立ち並んでいた地域一帯を、アメリカ人のオーナーが1年以上かけてオフィスやコワーキングスペース、イベント会場などを兼ね揃えた「イノベーションを生み出す場」として再開発した施設です。 Factory Phnom Penhはプ
実際の業務にも役立つ？大手企業の入社試験に導入されている「フェルミ推定」とは | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近では、事業拡大のためにさまざまなポジションの人材を積極的に採用・育成に注力しています。組織として着実に成長しているなと感じていますが、そのなかで、いかにマネジメント力やリーダーシップのある人を採用するか、またそのスキルを訓練するか、を最近は考えています。 ……ところで、突然ですが問題です。 アメリカのシカゴには何人のピアノ調律師がいるでしょうか？ あなたはパッと答えることができますか？ これは「フェルミ推定」と呼ばれる問題の一例です。いっときSNS上でバズっていたので、知ってる！ という方もいるかもしれません。 今回はこの「フェルミ推定」についてお話ししたいと思います。 無理難題に立ち向かう。「フェルミ推定」とは 「フェルミ推定」とは、一見答えの出しようがない問題に対して、論理的に仮説をたてて概算を
【Web担当者向け】制作会社から適切な見積を引き出すテクニック | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エリカです。 見積依頼をしたいけれど、なにを尋ねればいいか分からない！ 見積書や提案書の内容が適切なのか分からない！ そんな悩みを持つWeb担当者の皆さまに、制作会社から適切な見積を引き出すテクニックをご紹介します。 STEP1 : 思いついた課題をすべて書き出す まずは課題を書き出してみましょう。課題の大小や優先度は決めずに、とにかく思いついたことをすべて書き出します。 ポイントは『なぜ課題なのか』を添えることです。 課題の例 新しいサービスを作るから、サービスを説明するサイトがほしい デザインが古くなったと感じるから、新しくしたい お問い合わせの件数が少ないから、問い合わせの数を増やしたい ニュースの更新が面倒だから、更新しやすいサイトにしたい Googleの検索結果に表示されないから、SEOを強くしたい STEP2 : 書き出した課題を3つに分ける 前項で書き出した課題を
【完全保存版】シートで簡単チェック！デザイナーが見落としがちなUIデザイン12の想定漏れ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのほりでーです。 Webやアプリの開発ではデザイナーとエンジニアの連携が欠かせません。デザイナーとエンジニアが分業する場合、デザイナーがPhotoshopなどのグラフィックツールで完成図となるデザインカンプを作成し、それを元にフロントエンドエンジニアが実装してWebサイトを完成させることが多いでしょう。 しかし、最近のWebサイトで多用されているリキッドレイアウト（横幅の変化に追従するレイアウト）や、ユーザーの操作に反応するインタラクティブなアニメーション表現、CMSやJavaScriptと連動して動作する複雑なUIなどをカンプ上で表現するのは困難です。 そのため、デザイナーが「ここはこういう風に動かしたいな〜」と思っていても、それがエンジニアに伝わっていない、という見落しも発生してしまいます。 一般的に、ソフトウェアの開発では仕様が不安定（＝必要な機能
フロントエンジニアとして１年が経ち使うようになった開発ツール紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おはこんばんにちは、ハルです。 新人フロントエンジニアとして、LIGで働き1年が経ちました。 専門学生時代、実際の現場ではどんなツールを使って開発しているのだろうと気になることがありました。 今回は、そんな「これから勉強を始める人」「これからフロントエンジニアとしてスタートする人」へ向けて、僕がフロントエンジニアとして働き始めて1年を経て使うようになったツールを紹介できればと思います。 本稿では、開発で使用しているツールに絞って紹介します。 Macを使用しているため、Macで開発するツールの紹介になりますが、物によってはWindowsにもあるかと思います。人によって使うものは違うと思いますが、参考になればと思います。 私の場合は、HTML/CSS/JavaScript/PHPを使用し開発していますが、テンプレートとしてfrontplate-cliを使用しています。 フロントエンドで必要なも
Photoshopを快適カスタマイズできるオススメ無料プラグイン6選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 普段Webデザインを制作する上でPhotoshopを使用している方は多いかと思いますが、いかに自分に合った環境にカスタマイズするかで作業効率は大きく変わってきます。 今回はいつものPhotoshopがさらに快適になる無料プラグインをご紹介させていただきます。 【こちらもおすすめ】 おすすめPhotoshopプラグイン WebINK http://www.webink.com/webfontplugin/ ※現在このサービスはご利用いただけません。 Google Web FontなどのWebフォントをPhotoshop上で表示、利用することができます。 最初の同期に少し時間がかかりますが、あとはデザインしながら手の届くところでWebフォントがさくさく選べてしまうので、非常に捗ります。 Photoshop CS5から対応しています。 flaticon ht
「ミクロよりマクロを見ろ！」Googleアナリティクスで細かい数値ばかり気にしている人へ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Googleアナリティクスを使ったサイトのログ解析って、時間がかかりますよね。しかも時間をかけたところで必ず成果につながるとも限りません。 そういった問題を解決するために生まれたのが、Googleアナリティクスと連携する解析ツール『Anatomy（アナトミー）』。 Anatomy無料登録はこちら たった１画面でサイト解析が完結してしまうという画期的ツールです。 そこで、このツールを開発した株式会社シンメトリックの代表に解析のコツや課題についてお話を伺いました。 代表取締役 坂田和敏（さかた かずとし） 1991年日本IBM入社。SEとして主にSI開発に携わる。2001年にシンメトリックを設立。自社企画開発のサイト変換製品は大手企業100社以上に導入される。現在は顧客の声をヒントに独自の視点でサイト改善をサポートするサービス提供をしている。 「解析に時間がとられて改善に手が回らない」という課
Instagram APIを取得してWebサイトと連携し、投稿写真を自動に掲載する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おはうぃーす！ しょごです。 先日ノートPCを購入しました、これでスタジオでドラム録音とか動画作成とか気兼ねなくできます。 久しぶりに演奏動画でもアップしよう、、ゲーム実況もいいな。。。ふふふ。。 さて、今回はInstagramAPIを使ってWebサイトと連携したときの話です。 Instagramとは iPhoneやAndroid端末で写真を撮影し、共有するスマートフォンアプリのことです。Webからも閲覧でき、固有アカウントを設けて投稿管理ができる写真特化型のSNSです（もちろん無料）。 Twitterのようにフォローした人の写真がタイムラインに流れてきて、アップロードした写真には「いいね！」やコメントを付けることができます。アプリ内のカメラで撮影した写真や、カメラロールの写真を選択して手軽にアップロードができます。 プライベートモードで非公開設定も可能。Twitterとの最も大きな違いは
フロントエンジニアでも簡単にWordPressテーマを作成するよ – 作成編 – | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おはこんばんにちは ハルです。 前回は、MAMPでサーバーを立ち上げてデータベースを作成、WordPressを用意し、見れるところまでやりました。 確認していたURL 『 http://localhost:8888/sample-wordpress/ 』 今回は、上記の画像のようなトップページをささっと作っていきたいと思います。 WordPressテーマの置き場所 WordPressの「テーマ」とは、見た目と機能をまとめたフォルダのこと。 このテーマは、管理画面から簡単に切り替えることができます。 そのテーマの置き場所を先に説明します。まず下記のフォルダを開いてください。 『/sample-wordpress/wp-content/themes/』 ※前回から用意している「sample-wordpress」はWordPressのフォルダ名です 今回のWordPressのバージョンでは tw
親しみやすさアップ！手書き風イラストのフリー素材まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、デザイナーのモモコです。 今回はフリーで配布されているもののうち、汎用性の高そうな手書き風素材をまとめてご紹介します。 【こちらもおすすめ】 ☞ 質高すぎ！ベクター素材をフリーでダウンロードできるサイトまとめ 手書き風のフリー素材イラストまとめ Free Hand Drawn Vector Ribbons http://every-tuesday.com/freebie-hand-drawn-vector-ribbons/ 可愛らしいリボンのベクター素材が20個用意されています。 ちょっとしたワンポイントなど、手軽に利用できそうです。 Captain Icon +350 Free Vector Icons http://mariodelvalle.github.io/CaptainIconWeb/ 使い勝手の良いベクターアイコンがなんと350個も用意されています。 EPS、P
これがあれば自信が持てる! ライター必携の原稿セルフチェックシート15項目 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。子煩悩ライターのイワタテです。 娘、と書くより、愛娘、と書いた方がしっくり来るんです。 きっと、愛しているからでしょうね。 ところで、ライターという職種に限らず、仕事で文章を書くすべてのみなさん。 原稿、自信をもって出していますか？ 僕は、自信をもって出しています。 その秘密は、原稿提出直前に必ず使う、15項目のセルフチェックシートです。 このチェックシートを活用するようになってからというもの、クライアントの機嫌は良くなるし、読者からのレスポンスが見違えたし、みるみる仕事が増えていくし……父ちゃんやったぜ愛娘！ 原稿送信のボタンを押すときはいつも不安になるという方。 よろしければこのチェックシート、印刷して机のどこかに貼って、使ってみてください。 □ 原稿の結論がタイトルに明記されているか。 何が書いてある原稿か直感的に理解できなければ、そもそも読者はページを開かない。 □ 想
文章が苦手な人にもできる文書力を上げる10の方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集長の朽木です。世の中には“わかりやすい人間”と“わかりにくい人間”がいて、概してわかりやすい人間の方がよくモテ、出世もしやすく、幸せな人生を送れると思う今日この頃です。 わかりにくい人間であるところの僕は、せめて自分の書く文章くらいはわかりやすくしたいと思っておりますが、みなさまの文章のわかりやすさはいかがでしょうか。 文章を書くことは、なにもライターや編集者だけの仕事ではありません。社内の報告書、社外へのビジネスメールなど、コミュニケーション・ツールとしての文章は、どんなに技術が進歩してもなくならないものです。 “他人が読むこと”を前提とするにあたり、目的は相手に情報を伝えること、であれば大切なのはその文章がわかりやすいかどうかになるでしょう。 僕は、月に100本くらいの原稿をチェックします。まだまだ勉強中の身ではありますが、そんな生活を続けていると、少なくと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
