こんにちは、LIGのづやです。 Jamstack構成により表示速度がはやい、コンテンツがHTMLに影響されないという特徴から、今や世界中で大きな注目を集めるヘッドレスCMS。海外で開発されているサービスが多いなか、数少ない国産のヘッドレスCMSが「microCMS」です。私たちLIGもサイト制作に活用しており、そのスゴさを肌で実感しています。 今回は開発会社である株式会社microCMSさんに取材の機会をいただき、どのようにヘッドレスCMSを開発しているのか、なぜ多種多様な企業に選ばれているのか話を聞きました。 ※オンラインにて取材いたしました。 「受託開発の課題」を解決するために辿り着いたプロダクト ―― まずは御社が国内でいち早くヘッドレスCMSを開発した背景を聞かせてください。 柴田 和祈さん 2017年に株式会社microCMSを共同創業し、現在はCXO兼デザイン責任者。元々はWe

新年度も始まったということで、去年に引き続き注目トレンドのWebサイトをいっぱい見漁ってきました。 徐々に緩和されつつありますが、移動や外出が制限されていたこともあり、より刺激的な体験をインターネットに求める傾向がありました。また、社外だけではなく社内のコミュニケーションもオンラインが当たり前になっていることから、より効率的なコミュニケーションが模索されてきています。 AIを使ったサービスが爆発的に認知を広げていたりとさまざまな変化があるなかで、Webサイトはどう進化していくのでしょうか。妄想を膨らませながら見ていきましょう。 ※今回こちらの記事を参考にしています。 Top Web Design Trends of 2023 11 engaging web design trends for 2023 9 interactive web design trends for 2023 こんな

こんにちは。Webデザイナーのぱんちゃんです。 この記事ではデザインをする上で重要な要素である「余白」について解説します。 「デザインがごちゃごちゃしてしまってなんだか垢抜けない……」 「かといって余白を作るとスカスカしてしまいそうで怖い……」 そんな経験をしたことのある方向けに、余白の役割と効果的な使い方、意識するべきポイントを解説します。 独学でつまずいていませんか？ Webデザインの基礎を効率的に学びたい、プロに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。 詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） 余白によって与える印象はこんなに変わる！ 余白はデザインをする上で非常に重要な要

「冷たい印象になるから」と、若い人はメッセージのやりとりで句読点をつけたがらない。そんな話を聞いて「俺、もしかして冷たい人間と思われているかも？」とショックを受けました…。 どうも✋おじさん構文マイスターことエディター✍のヒロです(^_^)💦💦🍺 10年以上の紙媒体編集者歴を経てWeb編集者に転身した自分ですが、いまだに戸惑うことがあります。それは、Web編集ならではのスピード感です。 なかでもスピード不足を自覚しているのが、原稿の校正校閲業務。紙媒体編集者の宿命ともいえるのですが、「ミスは絶対に許されない」の気迫で校正校閲に臨むため、どうしても時間がかかります。「ミスっても気づいたら後で直せばよくね？」なWebのチャラいノリに賛同できないわけですね。（句読点の抜け漏れもやっぱり許せません！） 「Webのスピード感で校正したい」「でも紙媒体クオリティは死守したい」、この狭間で葛藤し、

こんにちは！ インハウスデザイナーのぱんちゃんです。 入社して一年、LIGブログのアイキャッチ画像をひたすらに作ってきました。これまでのLIGのアイキャッチは、記事の魅力が最大限伝わればトンマナはなんでもOK！ ユニーク万歳！ でしたが、CIが変わりちょっぴり大人なLIGになった今、より信頼感やプロフェッショナルさが伝わるアイキャッチに変えていこうと試行錯誤をしています。 新たなLIGらしいアイキャッチはなんだろうと考えたときに「まずは世の中にある素晴らしいアイキャッチを知ることから始めよう！」と思い、他企業・他メディアのアイキャッチの分析を始めました。 今回はクオリティの高いアイキャッチのWebメディアを37個紹介します。 アイキャッチを制作するデザイナーの方、メディアサイトを制作されている方、アイキャッチのディレクションをする方にとって参考になれば幸いです！ 紹介したいWebメディアが

どうも、LIGのテクニカルディレクターのおきくです。 最近はPM業務が多くなり、本来のテクニカルディレクション業務から離れることも多いですが、相変わらず技術に対する知識欲は衰えておりません（笑）。 さて今回ですが、案件などでよく設計やディレクションすることが多い、セキュリティ設計（サーバーサイド限定）についてお話ししたいと思います。このブログを通じてみなさんのセキュリティ設計に少しでもお役立てできたら幸いです。 インフラ関連について インフラ関連だと様々な観点での設計が必要になりますが、主に以下観点での設計が必要です。 アクセス管理 WAF 侵入検知・防御 アクセス管理について 様々な観点でアクセス管理を実施する必要性があります。 基本的な考え方としては、各リソースやサブネットワークへのアクセスについて許可されていないIPやサービスからのアクセスを禁じる、想定外なアクセスを行わないようにす

エディターの平林享子（きょうこ, @cloverbooks）です。「SEOも強いオリジナル取材記事」という分野を追究しています。 さて、2022年のSEOを取り巻く環境はどう変化していくんでしょうか？　傾向と対策を知りたい！ というわけで、今回はSEOコンサルタントのおおきさん（@ossan_mini ）に、これからのSEOについて押さえておきたい5つのポイントをお聞きしました！ SEOコンサルタント／おおきさん Twitterでの有益な情報発信で知られるSEOコンサルタント。事業会社、広告代理店のSEO部門、SEO会社などを経て2016年に独立。肩書きはSEOコンサルタントながら、実際にはデジタルマーケティング全般、ブランディングも守備範囲。 Twitter　 @ossan_mini Instagram　 @digitalmarketerjp ブログ「SEOの森」　 https://se

うどん県出身・Webディレクターのセイタです。夏にジムへ入会しましたがバキバキな身体にはなりませんでした。来年の夏はビーチのスターになれるようにやっていきます。 さて今回は、制作したWebサイトの公開前に必ず実施する、ブラウザの表示テストについて学び直したことをまとめました。 制作が完了し、これでリリースできる！ と喜ぶのはまだ早い。このテストを完了させてこそ、はじめてきちんとした状態で公開を迎えられるのです。 なぜブラウザの表示テストを実施するのか？ 先に結論から言うと、さまざまな端末およびブラウザにおいて制作したWebサイトの品質を担保するためです。 もう少し柔らかく言い直すと、ユーザーは様々な環境でWebサイトを閲覧するため、どの環境においても問題なくWebサイトが表示されるようにテストする、ということです。 ユーザーが閲覧する環境は端末だと、下記がありますね。 Windows Ma

サイト改善の神ツール！？無料で使えるユーザー行動分析ツール「QA Heatmap Analytics」がスゴかった件 みなさんこんにちは、外部メディアコンテンツ制作チームでリーダーをしているやぎです。普段はさまざまなオウンドメディアの記事制作代行や運用支援をしています。 突然ですが、私と同じオウンメディアのコンテンツ制作に関わっている方は重々承知かと思いますが…… 記事は「作って終わり」じゃないんです！！！ メディアを成長させるうえでは、作った後がもっとも重要といっても過言ではありません！ ただ作って終わりではなく、コンテンツ設計にあたり決めたKPIに対する進捗はどうなのか、といった効果測定を日々実施し、PDCAサイクルを構築していくことが重要であり、もっというと”C”の「Check（評価）」 、つまり記事の「分析」 を怠ると、メディアの成長はできません！ さぁみなさん、今すぐに自社のオウ

Dockerのインストール ラズパイのターミナルを開き、以下のコマンドでインストールできます。使うのはターミナルだけなので、sshとVNCのどちらでログインしても問題ないです。 $ curl -sSL https://get.docker.com | sh ラズパイへのDockerインストールは6、7年前にもチャレンジしたことがあったのですが、当時は有志の方が作成したイメージを使用する必要があったと思います。ARMのイメージも少なく自分でビルドする必要があったことも、当時諦めた要因の一つでした。最近は簡単になっており、感動です。 あとは自分のユーザーをDockerグループに追加します。 $ sudo usermod -aG docker {ユーザー名} ついでに自動起動もしておきます。 $ sudo systemctl enable docker ここで、一度ログアウトして再度同じユーザー

朝の人も夜の人もおはようございます。ザワです。自然の雄大さを感じる年頃のフロントエンドエンジニアです。 さて、私は仕事柄、ソースコードのレビューをします。その最中、気づいたんです。比較的簡単にできるリファクタリングってあるよねって。今回はそんなお得なリファクタリング項目を五つに絞って紹介いたします。 普段vueを触ることが多いので、一部vueでソースコードを紹介いたします。 関数名変更 変更前 <button @click="onClick">トップへ</button> const onClick = () => { router.push('/') } 変更後 <button @click="goToRoot">トップへ</button> const goToRoot = () => { router.push('/') } 変更前のonClickでも別におかしくはありませんが、vueの

本記事に関しまして 今回弊社が企画制作し2021年9月28日付けに公開したPR記事に関しまして、不適切な表現があり読者のみなさま、ならびに関係者のみなさまにも不快な思いをさせてしまい、心よりお詫び申し上げます。 該当記事は30日午前に掲載を取り下げました。 お客様のサービスを魅力的に伝える立場にありながら、ハラスメントと捉えられるような表現を含む記事コンテンツを企画制作し、公開してしまいましたことを深く反省しております。みなさまからのご指摘のとおり、情報発信をおこなうメディアとして軽率な行動・判断であったと関係者一同、この事態を非常に重く受け止めております。 また、弊社が企画制作したコンテンツにご協力いただいた広告主のみなさま、ならびに出演者のみなさまに対して、誤解ある印象を与える結果となってしまったことを、誠に申し訳なく感じております。日頃から弊社とお取り引きしてくださっているお客様に対

こんにちは！ デジタルハリウッドSTUDIO by LIG（以下：デジLIG）の運営担当の天（@10TEN10TAN10）です！ デジタルハリウッドSTUDIO by LIGとは 株式会社LIGとデジタルハリウッドが業務提携をしてはじめたクリエイター養成スクールのこと。Webデザイナーや動画クリエイターを目指す方向けのカリキュラムを展開している。現在、上野・池袋・北千住・町田・川崎・大宮にて受講生を募集していて、無料説明会は毎日開催中！ 現在デジLIGでは、トレーナーを募集しています！ トレーナーってどんなお仕事しているの？ と気になる方も多いと思うので、今回はデジLIGの立ち上げからお世話になっているトレーナーさんに、これまでのデジLIGのことや、デザイナーに求められるスキル、これから期待していることをインタビューさせていただきました！ これからのWebデザイン業界に興味のある方はもちろ

こんにちは、Webディレクターのなべちゃんです！ 今回はWebサイト制作では欠かせない、サイトの骨格である「ワイヤーフレーム」の作り方について、紹介していきたいと思います。 LIGではデザイナーがワイヤーフレームを作成することが多いのですが、今回は先輩ディレクターでありデザイナーでもあるほそさんにフィードバックをいただきながら作成していきました。 お客様にとって内容がわかりやすいのはもちろん、デザイナーにとってもデザインしやすいという観点でのフィードバックが、目から鱗の内容だったので、今回学びのアウトプットとしてまとめていきたいと思います！ そもそもワイヤーフレームとは 冒頭でチラッと書きましたが、サイトの骨格・情報の設計図のようなものです。 Webサイトを作成するときに、いざデザインをするとなると、この情報は必要なかった、この情報は入れてほしい、表示順を変えてほしいと出戻りが起こってしま

こんにちは。元LIGのWebディレクターで、いまはとある事業会社で開発ディレクターをやっているともぞうです。 さっそく本題ですが、みなさんはなんのCMSを使っていますか？ WordPress、Drupal、Movable Typeあたりでしょうか？ 最近ではヘッドレスCMSというものも出てきて、CMSの選択の幅が広がりました。 今回はそのヘッドレスCMSに焦点を当て、ヘッドレスとは？ というところから、ヘッドレスCMSのメリットデメリット、各ヘッドレスCMSの比較ができる記事をお届けします。 ※この記事は株式会社ディバータの提供でお届けします。 ヘッドレスCMSとは まずヘッドレスCMSの説明からはじめます。 ヘッドレスCMSとは表示機能を持たないCMSのことを呼びます。「ヘッドレス」で調べてみると以下のような説明がでてきました。 ソフトウェアについてヘッドレスという場合は、通常は用意され

こんにちは、制作事業部WebディレクターのZIMAです。 みなさん、SEO内部施策やってますか？ やっていないわけないですよね。しかし「どこまでやってますか」と聞かれると……困っちゃう人多いのではないでしょうか。 実は自分もどこまでやればいいんだろう？ と思って、我らがづやさんに聞いてみたところ「ふむふむ、それなら、 ちょうどいいの作ってるから、勉強がてらZIMAがつくってみてよ」と、ひょんな流れから私がLIGのSEO内部施策チェックリストを作成することになりました。 せっかくなのでブログにして自分の学びをみなさまに共有したいと思います！ そもそもSEO内部施策ってなんだ？ Webサイトの中身をGoogleなどの検索エンジンに正しく伝えたり、ユーザーがストレスなく利用できるようユーザビリティを向上させるための施策のことです。 世界中のWebサイトをクローリングしているのは簡単に言えばロボッ

エクセルやパワポで作るよりもいろいろな利点があるため気に入っているのですが、思わぬところに落とし穴があったりと、いろいろ工夫が必要なところがあります。 そこで今回は、私がXDで画面仕様書を作る際に気をつけていることと、おすすめの作り方をご紹介します。 今回は下準備編です。 下準備その1：前提資料一式を作る まずはXDで画面仕様書を作る前に、必要な前提資料一式を作ります。これらを作らずに画面仕様書を書き始めてしまうと、書き方が迷走したり、 一つの資料に情報を詰め込みすぎた見にくい資料になってしまいます。 最低限、以下の資料は事前に作るようにしています。 サイトマップ ディレクトリマップ（テンプレート一覧） コンポーネント一覧 フォーム入力項目一覧　　※フォームがある場合 CMS編集項目一覧　※CMSがある場合 いずれも一覧系の資料になります。画面上の細かい仕様を決める前に、これらの資料を通し

こんにちは、デザイナーの花ちゃんです！ デザインをするとき、どのようなフォントを使えば、そのサービスや商品、あるいは企業のイメージがより魅力的に伝わるのかを考えますよね。それはもちろん、Webサイトのデザインでも同じだと思います。 私もWebデザインを始めたばかりの頃は、フォントにずいぶん悩まされました。Webフォント？ デバイスフォント？ なんで端末によって表示されているフォントが違うの！？ と大混乱したのを覚えています。 仕組みや特徴を知っていれば、フォントを選ぶうえでの一つの基準になります。 今回はデザイナーが知っておきたい、Webフォントの基礎知識をまとめてみました！ それぞれのWebサイトの目的に合った、フォント選びをしたいですね。 よく聞く「Webフォント」ってそもそもなに？ 今や当たり前のWebフォントですが、少しおさらいをしたいと思います。 Webフォントとは、あらかじめサ

こんにちは。小林です。 単刀直入に言いますと、この記事を読むと「Docker+WordPress」の環境でXdebugを使えるようになります。早速ですが説明していきます。 はじめに まず私の開発環境の紹介です。 （マシンは6年前にフルスペックだった）MacbookPro （IDEがないと何もできないので個人的に最強のIDEだと思っている）PhpStorm （いろんな開発を並行するのでとっかえひっかえしやすい）Docker と、こんな環境で普段開発をしているのですが、久しぶりに大規模なWordPress案件に携わることになりました。 その案件では、馴染みのないプラグインを多数入れたり、そもそも最新のWordPressの機能を把握できていなかったりと、いくらPhpStormを利用しているといえども、それぞれの機能を追うのがなかなか難しい状況でした。 そこで、久しぶりにXdebugを頼ることを決

こんにちは！ BiTTチームのキー坊です。 今日はお題の通りNASを作っていこうと思います。 というのも、この記事を書いている2021年5末で、Googleフォトの無料利用が終了するということもあり新しいストレージ先を探しています。NASもその候補の一つですが、値段高いものが多いため手が出しにくいですよね。 うちにも稼働しているNAS（QNAP TS−231P）があるのですが、そろそろ容量逼迫が見え始めてます。調べてみると自作で安く仕上げることができるようなのですが、やはりパフォーマンス面が心配ですよね。 その辺りの疑問にお答えするような記事にしましたので、最後まで読んでもらえると嬉しいです！ 僕と同じようなストレージ難民な方いましたら、ぜひ参考にしていってください。 用意するもの ラズパイ4（ラズパイ3でも動作すると思いますが、LANが遅いので非推奨） データ保存用USB接続HDD NA