ホームページ制作・システム構築なら
株式会社Omit

企業の人材確保や育成の課題を解決するため、弊社はAIを活用した社内教育システムについて考えてきました。AIが豊富な知識と企業独自のデータを活用し、気軽に質問できる「優しい先輩」のような存在となることで、新人のスキルアップを支援し、人材不足の解決に貢献できれば、弊社のミッションであるお客様の課題解決のお手伝いができると常にかんがえておりましたので、弊社の考えと現段階でのご提案を少しばかりご紹介。 目次 なぜ今、人材育成が必要なのか？ AIによる人材育成が人材不足を解消する理由 AIを導入しても使われなければ意味がない AIが活躍する具体的なシナリオ AIと人が協力する理想的な育成プロセス AIによる人材育成の未来 なぜ今、人材育成が必要なのか？   多くの企業が人材不足に直面し、特に専門スキルを持った人材の確保が難しくなっています。採用市場は競争が激化し、即戦力を確保するコストも増加しています。そこで、企業が持続的に成長するためには「新しい人材を外から採用する」だけでなく、「社内の人材を育成し、戦力化する」ことが重要になっています。 しかし、従来の人材育成には、教育担当者の負担増、ナレッジの属人化、学習の非効率性などの課題がありました。これらの課題を解決するために、AIを活用した新しい人材育成の手法が注目されています。 AIによる人材育成が人材不足を解消する理由 AIを活用することで、従来の人材育成が抱えていた問題を大幅に改善できます。具体的には、次のようなメリットがあります。 1. 24時間対応で学習をサポート AIは人間のように休むことなく、新人や既存社員の質問にいつでも答えることができます。教育担当者が不在でも、AIが業務の基礎やスキルを丁寧に教えてくれるため、学習が止まりません。また、オンラインプラットフォームと連携し動画での学習などもサポート可能。 2. 一人ひとりに最適化された学習プラン AIは個々の学習進捗を分析し、適切な教材やトレーニングを提案できます。新人には基礎から、経験者には応用的な内容を提供することで、効率よくスキルを伸ばせます。 3. 知識の一元化と属人化の防止 社内のナレッジをAIが蓄積・整理し、必要なときにすぐに引き出せる環境を作ります。「この作業って誰に聞けばいいんだっけ？」という問題がなくなり、業務の標準化が進みます。 4. 実践的なトレーニングとフィードバック AIがシミュレーション環境を提供し、実際の業務シナリオを体験できます。また、AIは間違いを即座に指摘し、改善点をフィードバックすることで、より効果的な学習を実現します。 AIを導入しても使われなければ意味がない AIを導入しても、従業員が使わなければ効果は発揮されません。以下のような課題が想定されますので、それぞれの解決策を考えました。 Omitとしては、「こまめなフォローアップや勉強会」と「使い慣れているものをインプットとアウトプットで使う」「自動化」がポイントとなると考えております。 課題1: AIを使うことに抵抗がある AIに慣れていない従業員は「難しそう」「本当に役立つの？」と疑問を抱くことがあります。 解決策: スマホやPCから使えるチャットツールを導入し、そのツールにて先輩と会話しているような感覚でAIを使う事で導入の抵抗を軽減。初期トレーニングを実施。小さな成功体験を積み、徐々にAIの活用を促します。また、AIからの自発的な問いかけを行わせることで、より身近にAIを感じていただく。 課題2: AIが業務に適していないと感じる 業務に直結しないと、AIの活用が進みません。 解決策: AIを業務フローに組み込み、日常の業務で役立つ場面を増やす。FAQの自動応答や業務チェックリストの提供など、具体的な用途を明確にします。Omitでは、お客様の環境や業務に合った方法を模索し、可能であればシステムを構築するなどして対応いたします。 課題3: 使い方が分からない 新しいシステムは、導入後に放置されると使われなくなります。 解決策: マニュアルや動画チュートリアルを提供し、いつでも学べる環境を作る。さらに、定期的なフォローアップを行い、習熟度を向上させます。またAIからのプッシュ型学習によって、使い方が分からない方でも学びやすくなっております。 AIが活躍する具体的なシナリオ 実際にAIがどのように活用されるのか、職種別に見ていきましょう。 新人育成 新人が業務や社内情報について気軽にAIに質問できる環境を作ることで、疑問点を即座に解消し、スムーズな業務開始を支援します（チャット＋AI）。 AIが社内のデータベースを学習しているため、社内独自の業務プロセスや規範についてもサポートを提供できます（チャット＋AI）。 オンライン学習プラットフォームを通じて、新人が事前に業務を学習できるため、安心して業務に取り組むことができ、習得スピードも向上します（オンライン学習）。 高度なAIによるシミュレーション環境により、新人が実際の業務シナリオを体験し、より実践的なスキルを習得できます（オンライン学習＋AI）。 チームや仕事のカルチャーフィットを早期に把握し、AIからのアドバイスやフィードバックを通じて、新人の職場への早期適応を促進します（チャット＋AI）。 小売業（新人スタッフ） 商品知識や接客トークの向上をAIとの会話形式で学習できます。例えば、商品の特徴や顧客への説明方法などをAIが質問し、新人スタッフが回答することで、実践的なスキルを習得します（AIチャット使用例）。 製造業（新人作業員） 機械の操作方法や安全確認について、AIとの対話を通じて学ぶことができます。安全チェックのポイントや緊急停止ボタンの位置などをAIが質問し、新人作業員が答える形式で、安全意識の向上とスムーズな機械操作の習得を支援します（AIチャット使用例）。 看護師（新人看護師） 患者のケアや緊急対応に関する知識や判断力を、AIとのシミュレーションを通じて高めることができます。例えば、患者の転倒時の初期対応や医師への報告内容などをAIが問いかけ、新人看護師が対応を練習することで、実践的な対応スキルを習得します（AIチャット使用例）。 カスタマーサポート担当者（新人スタッフ） よくある質問やクレーム対応について、AIとのロールプレイング形式で学ぶことができます。顧客からの問い合わせに対してどのように対応すべきか、交換手続きの流れなどをAIが問いかけ、新人スタッフが対応を練習することで、問題解決能力と顧客対応の向上を支援します（AIチャット使用例）。 問い合わせメールと連携し、返答例をAIが教えてくれる等、業務のサポートをしてくれることで安心感を与えます。 ナレッジが蓄積してくると、オンラインチャットボットを解説し、サポートの業務効率化も可能。 営業 顧客の過去の発注履歴をAIが迅速に提示することで、顧客情報をすぐに把握し、提案活動に活かすことができます（チャット＋AI）。 ビジネスマナーに関する質問にAIが答えることで、新入社員や経験の浅い社員が適切なビジネス行動を学ぶことができます（チャット＋AI）。 メール文章の校正をAIが行うことで、より正確でプロフェッショナルなコミュニケーションが可能になります（AI）。 商品の在庫状況をAIが即座に回答することで、顧客からの問い合わせに迅速に対応できます（チャット＋AI）。 新規顧客について、チャットで「〇〇株式会社の事教えて」等投げかけることでAIが自動で情報を収集し、クライアントワークを助けてくれます。 全職種共通 プレゼンテーション資料の作成や企画立案において、AIがアイデア出しや構成のサポートを行うことで、業務スピードが向上します（AI）。 画像作成、チラシ、名刺作成などをAIが行うことで、外注費用を削減できます（AI）。 単純作業や繰り返し作業をAIが自動化することで、社員はより戦略的でクリエイティブな仕事に集中できるようになります（AI）。 社内チャットを通じて、迅速な情報共有や意思決定が可能となり、プロジェクトの進行速度が向上します。 蓄積された情報に素早くアクセスできるようになるため、問題解決や意思決定の迅速化に貢献します。   AIと人が協力する理想的な育成プロセス AIを導入した人材育成の理想的な流れは次のようになります。 基礎学習: AIが業務の基本を教える 実践トレーニング: AIと対話しながら業務シミュレーションを行う 業務への適応: 現場での実務とAIによる補助 継続的なスキルアップ: AIがフィードバックを提供し、学習を続ける このサイクルを繰り返すことで、企業は長期的に優秀な人材を育成し、人材不足を補うことができます。 AIによる人材育成の未来 AI技術は日々進化しており、今後さらに高度な人材育成が可能になると予想されます。 そこでOmitでは、企業とAIと人材をテーマに、お客様への柔軟なご提案ができるよう、日々研鑽を積んでいます。技術のトレンドを追うだけでなく、実際の現場で役立つ仕組みや運用方法を深く理解し、現場の声に耳を傾けながら最適なAI活用のあり方を模索しています。 私たちは、「人（人材）が主役であること」を前提に、AIを人の成長を支えるパートナーとして活用する未来を描いています。新人教育から業務支援、継続学習まで、あらゆるシーンでAIが自然に溶け込み、社員一人ひとりの可能性を引き出せる仕組みを、これからも追求していき、人材不足という大きな課題に対して、テクノロジーと人の力を掛け合わせることで、企業の未来を明るく、力強く支える存在でありたいと私たちは考えています。

Omitでは、いくつかのプロジェクト管理ツールを使ってきましたが、もっとシンプルで社内の業務が簡素化できるプロジェクト管理ツールを探していました。 使ってた（検討していた）ツールとしては、Redmine、Asana、Jooto、Notion、Wrikeなどなどありますが どれも人数が増えるとコストが増えたり、やりたいことが出来なかったり、スタッフ全員がわかりやすいものではなかったりと満足できるものが無い状態でした。 そこで、スクラッチで作ってしまおうかと思いましたが、いい機会なのでAppsheetを使ってノーコードで構築から運用までしてみましたので、ざっくりではございますがご紹介いたします。   Omitでプロジェクト管理ツールを検討する際の条件 シンプルである 会社全体のプロジェクト状況がわかる画面と各個人が自身のタスクの状況を把握できる画面 GoogleDriveでプロジェクト用のデータや素材など管理しているので、連携してほしい（プロジェクト追加すると、指定の場所に複数フォルダが作成される） RocketChatと連携したい（期限間近タスクの通知、プロジェクト追加時にRoomの作成） プロジェクトの進行状況、個人の負荷状態がわかりやすい 案件ごとメールをテンプレで送信できるように（打ち合わせのお礼等） タスクやプロジェクトタイムラインがほしい カスタマイズが容易 AIと連携させたい（プロジェクトの進行状況まとめの通知、タスク忘れ防止、クライアントへの連絡忘れ防止、様々なミスを未然に防げるように、更にDriveや議事録と連携させ案件に対する分析やアドバイスが自動出てくる仕組み） 上記の条件を考えると、かなり自由にカスタマイズできる必要があるため、OmitではGoogleスプレッドシートとAppSheetを使ってみるという選択になりました。 そこで、まだ条件を満たす物はできていませんが、プロジェクト管理ツールとして最低限使えるまで、行った事を手順に沿って解説します。   1.AppSheetって何？ AppSheet（アップシート）は、プログラミングの知識がなくても、誰でも簡単にアプリを作れるサービスです。Googleが提供しているツールで、「ノーコードアプリ作成ツール」**と呼ばれています AppSheetの特徴を簡単に説明すると… 1. プログラミング不要！ → コードを書かなくても、マウス操作や簡単な設定だけでアプリを作れます。 2. 表計算ソフトがそのままアプリに！ → GoogleスプレッドシートやExcelなどのデータを使ってアプリが作れます。例えば、スプレッドシートに「商品名」「価格」「在庫数」などを入力しておけば、それがそのまま在庫管理アプリになります。 3. スマホやパソコンで使える！ → 作ったアプリはスマホやタブレット、パソコンから使えるので、現場でも事務所でも同じ情報が確認できます。 4. 業務効率化にピッタリ！ → 営業管理、タスク管理、顧客管理、在庫管理など、会社の業務に合わせたオリジナルアプリが簡単に作れます。 2.とりあえずスプレッドシートの準備 こちらは単純にスプレッドシートを用意し各シートを準備します。 顧客マスタ、担当者マスタ、プロジェクト状況マスタ、プロジェクト、タスクと用意し各項目を準備します。 顧客マスタ 顧客名 会社名 担当者 電話番号 主な連絡手段 作成日 メールアドレス メモ 担当者マスタ 名前 Googleアカウント rocketchatアカウント メールアドレス プロジェクト状況マスタ プロジェクト状態 プロジェクト プロジェクトID プロジェクト名 顧客名 種類 状態 開始日 納品日 担当D 概要 見積もりURL GoogleDrive 参加者 ボタン用 タスクシート タスクID プロジェクトID タスク名 内容 ステータス 担当者名 担当アカウント 予定工数/人日 開始日 終了日 プロジェクト名 顧客名 顧客名＋プロジェクト名 添付ファイル   3.AppSheetで各シート（テーブル）を構成  Dataのプラスボタンからデータを追加します。 参照先としてGoogleスプレッドシートを選択し、先程作成したファイルを選択します。 その後、各シートをデータテーブルとしてDataへ読み込みます。   全てのデータを取り込んだら次に ・各カラムの設定 ・Viewの設定などを行い、プロジェクト管理を行いやすく見やすく調整します。 （工程が多い為割愛させていただきます）   4.プロジェクト作成時にGoogleDriveに自動フォルダ作成を行う。 AppsScriptの作成 まず、AppsScriptを「Googleドライブへプロジェクトフォルダ作成スクリプト」等としてGoogleDrive内に作成します。 作成できたら、コード.gsへ以下のスクリプトを設置（※あくまでの参考用です。自環境用に修正してください） 以下のコードでは、プロジェクトフォルダの構成が以下のようになります。 顧客名 ├ プロジェクト名 　├ ディレクション 　├ データ 　　├ ソースコード 　　├ デザイン function doPost(customerName, projectName, projectDate) { try { var parentFolderId = "〇〇〇〇〇〇〇〇〇〇〇〇"; // 親フォルダのIDを設定 var newFolderId = createFolderByPath(parentFolderId, customerName, projectName, projectDate); return newFolderId; } catch (error) { Logger.log(error); return ContentService.createTextOutput(JSON.stringify({ error: error.toString() })).setMimeType(ContentService.MimeType.JSON); } } function createFolderByPath(parentFolderId, customerName, projectName, projectDate) { var parentFolder = DriveApp.getFolderById(parentFolderId); //顧客名フォルダを作成 var customerFolders = parentFolder.getFoldersByName(customerName); if (customerFolders && customerFolders.hasNext()) { customerFolder = customerFolders.next(); } else { customerFolder = parentFolder.createFolder(customerName); } Logger.log("customerFolder: " + customerFolder.getId()); if (customerFolder && projectName && projectDate) { formattedDate = formatDate(projectDate); // フォルダ名を作成 (例: "20250107_プロジェクト名") var folderName = formattedDate + "_" + projectName; // 既存のフォルダがあるか確認 var projectFolder = createCheckFolder(customerFolder, folderName); // 必要なサブフォルダを作成 createCheckFolder(projectFolder, "ディレクション"); var dataFolder = createCheckFolder(projectFolder, "データ"); createCheckFolder(dataFolder, "デザイン"); createCheckFolder(dataFolder, "ソースコード"); return projectFolder.getId(); // 最終フォルダのIDを返す } return customerFolder.getId(); // 最終フォルダのIDを返す } function createCheckFolder(parent, folderName) { var folders = parent.getFoldersByName(folderName); var targetFolder; if (folders.hasNext()) { targetFolder = folders.next(); // 既存フォルダを取得 } else { targetFolder = parent.createFolder(folderName); } return targetFolder; } function formatDate(dateString) { // 受け取った日付文字列を Date オブジェクトに変換 var dateObj = new Date(dateString); // 変換が失敗した場合のチェック if (isNaN(dateObj.getTime())) { return "Invalid Date"; // エラー処理 } // YYYYMMDD 形式に変換 var year = dateObj.getFullYear(); var month = ('0' + (dateObj.getMonth() + 1)).slice(-2); // 0埋め var day = ('0' + dateObj.getDate()).slice(-2); // 0埋め return year + month + day; } Automationの作成 次にAutomationに進み、Botsを作成します。 イベントはプロジェクトテーブルのデータ作成時にします。 次にタスクを作成し、「Call a script」に設定し、上記で作成したスクリプトを選択。 スクリプトへ渡す値も以下のように設定することで、プロジェクトを追加した際、自動でGoogleDriveへプロジェクト用のフォルダ構成を作成することができました。 以上で、シンプルなプロジェクト管理アプリの作成と、Apps scriptの連携でGoogleDriveへフォルダを自動作成まで行えるようになりました。 その他、調整やカスタマイズについては、また後日記事にできればと思います。  

あけましておめでとうございます、今年初めてのブログ書きますhoriです。 今回chatGPTの提案する題材に、デザインで答えてみたという企画です。 デザインを学びたいけど、どうすれば上達するのか、勉強方法がわからないという方にchatGPTを練習台にするという方法をご紹介したいと思います。 結局実践形式の方が上達が早い まず、デザインをやってみたいという方が一番にぶち当たる壁がどうやって学べばいいか？というところだと思います。昨今いろんなスクールや動画配信などがありますが、どうしても料金がかかってしまったりで、手が出しにくい…という方が大半ではないでしょうか？ そんな時にChatGPTを活用しましょう！ 私の経験上、一番手っ取り早く上達するためには実践経験を積むことだと思います。でも始めたてのデザイナーは実践経験を積むことは難しいと思います。 chatGPTなら、実践に近い形式のお題を出してくれて、また出来上がったデザインに添削までしてくれてフィードバックをもらえます！すごい！ やり方 1.まずはchatGPTにアクセスしてみましょう https://chatgpt.com/ 2.質問をしてみましょう 私は「DTPデザインの練習のためのお題を考えてください」と質問しました。 3.いくつか出たお題の中からチョイスしてデザインを作る 以上！簡単ですね！ お題は「雑誌の表紙」 10個ほど出てきたお題の中から、今回は雑誌の表紙というお題を1つ選んでやってみます！ ChatGPTからのお題は以下です 2. 雑誌の表紙 お題: 架空のファッション雑誌「URBUN」の表紙をデザインしてください。 条件: B5サイズ・表紙のみ 必要要素: 雑誌名、キャッチコピー、特集タイトル、写真（フリー素材やダミー画像） ポイント: 読者を引きつける配色やタイポグラフィを工夫。レイヤー効果 この情報では作れないという方へ、もっと詳しく情報が欲しいと聞けばもっと細かく設定を追加してもらえます！ 情報をまとめて、制作へ！ では、自分なりに情報をまとめていざ制作に入っていきましょう。 できました！ 今回は具体的な技術の説明は省きます。 次回出来上がったこちらを、ChatGPTにフィードバックもらおうと思います！ そしてフィードバックをもとに修正してみようと思います！  

こんにちは！Omitの後藤です。 今回はdockerを使用しての開発で突然ローカルに接続できなくなり、１週間ほど悩んだ時の話をします。 概要 前日までは普通に接続できていたコンテナに急に接続できなくなりました。 エラーページはこんな感じ。 コンテナはちゃんと起動しているのに、そんなばかな・・・ なんとか解決策を調べながら、色々試してみることに。 結論 eset（ファイアウォール）がローカルへの接続を邪魔している（？）せいでした。。。   開発環境 OS：macOS　バージョン15.1.1 docker：Appleシリコン　バージョン4.36.0 eset：8.2.800.0 解決方法 esetを開き、ファイアウォールのトグル（画像赤枠）をOFF chromeでlocalhostに接続 2で接続できたらesetファイアーウォールを再度ONにしておく 上記の方法でそれ以降も接続できるようになりました。 余談 dockerを再インストールすることで一時的に接続できる時もありました。 設定を見直したり、OSを再インストールしたり、mac自体を初期化したりした時もありました。 それのせいで環境構築を一からやり直した時もありました。あの時間は一体、、、？ この記事が同じような事象に陥った方の、参考になれば幸いです。

皆さん、こんにちは。 株式会社Omitの代表、末吉です。 今回は「画像生成AIはWEB制作の現場で使えるのか」についてお話ししたいと思います。 少し前までは、仕事で使えるほどのクオリティではなく、まだ本格的に活用するには至らないと感じていました。しかし、ここ最近では画像生成AIが大きく進化してきたと言われています。そこで、実際にどの程度使えるのかを、現実的なシチュエーションに基づいて検証してみることにしました。 使用する生成AI 機能 Gemini (Imagen3) StabilityAI (StableLM) Adobe Photoshop内の生成AI Midjourney 開発元 Google Stability AI Adobe Midjourney 主な特徴 写真のような自然な画像生成   オープンソースの言語モデル Photoshop内で直接編集可能 高品質な画像生成 商用利用 詳細不明 可能（Creative Commons By-SA-4.0ライセンス） 可能（Adobe Creative Cloudの一部） 可能（有料プラン） 特記事項 写実的な画像生成が強み 将来的に日本語対応予定 Adobe製品との高い親和性 有料プランのみ使用可能 ※DALL-e3は実写画像の生成があまりうまくいかなかったので除外 テキストのプロンプトで画像を1から生成 シチュエーション 工務店様のコーポレートサイトで使用するファーストビュー用のイメージを作成 要求イメージ 日本の建築会社のコーポレートサイトに適したファーストビュー用の超リアルな画像を作成してください。新しいモダンな家のリビングルームで、日本人夫婦が笑顔で会話している様子が描かれていること。リビング全体の雰囲気がよく伝わるように。 プロンプト Create a super realistic image for the first view that can be used on the corporate website of a Japanese architectural firm. An image of the living room of a new modern house. A Japanese couple is smiling and talking in the living room. The living room should look good. Imagen3 なかなかいい感じに生成されました。 StabilityAI StabilityAiは生成された画像に再度ズームアウトの処理などを実行しイメージに使い画像となりました。     撮影してきた画像に要素を追加した画像を生成   シチュエーション 工務店様のコーポレートサイトで使うファーストビュー用のイメージの作成 但し、撮影はしたが、殺風景なので雰囲気を出せるように日本人の夫婦を追加したい 撮影してきた画像 Adobe Photoshopで追加生成 指示通り夫婦を追加してくれました StabilityAiで追加生成 夫婦を追加という指示なのですが、女性が一人だけ、しかも顔が崩れているのでいまいち Imagen3に関しては、APIなどを使わないとインペイント出来なかったので、今回は使わず。   イメージにマッチする画像がなかったので類似画像を生成 想定案件 工務店様の打ち合わせ風景イメージを撮影したが、写りが良くない、構図が良くなかったなどの理由で、類似画像を生成 方法としては、元の画像をAIで解析し、プロンプトに変更する。その後そのプロンプトから新たに画像を生成するというやり方。 元の画像 元の画像から生成したプロンプトはこちら A high-resolution image depicting a business meeting scene in a modern office environment. Two individuals, one man in a navy suit with a green tie holding a folder, and a woman with shoulder-length brown hair in a white blouse, are seated in front of another man with curly black hair, all engaged in conversation. The setting is well-lit with a bookshelf in the background filled with colorful books, creating a professional and focused atmosphere. The camera angle should be a medium shot to capture their expressions and the surrounding details, utilizing natural light to enhance realism and depth. Imagen3で生成 セキュリティフィルターにより、画像が生成出来ない事が多く。何回もプロンプトの調整が必要。イメージとは多少ずれるが、クオリティは高い。 StabilityAI 人種が変わってしまった・・クオリティは高め Midjourney クオリティは多少下がったが、イメージにより近い画像が生成された まとめ WEBサイトを作成する上で、場合によっては使える画像を生成できるといった印象です。 今回は人物をメインにしたので、ハードルがやや高かったが、風景などの画像程度ならクオリティの高いものが作れる。 人物の生成はGeminiのImagen3が一番クオリティの高い生成が行えるが、セキュリティポリシーに引っかかり生成できないことが多くあった。  

ページ読み込み速度を改善したい、SEO対策初心者の方へ。 SEO対策の第一歩として、手軽に始められる画像遅延（Lazy Load）をご紹介します。 ページの読み込み速度は検索エンジンの評価に大きく影響するため、UX（ユーザーエクスペリエンス）を向上させるだけでなく、検索結果でのランキング向上にもつながります。 本記事では、初心者でもすぐに実践できる画像遅延の設定方法と、その効果について詳しく解説します。 [最も簡単なLazy Loadの設定方法] まずは設定方法を紹介します。 方法はいくつかありますが、HTML5のloading属性を利用する方法が最も簡単です。HTMLのimgタグにloading="lazy"属性を追加するだけで、ブラウザが自動的に画像の遅延読み込みを行ってくれます。 [SEO対策としての画像遅延の効果] 画像遅延を利用することで、具体的にどのような効果があるのかを3つ紹介します。 1.ページの読み込み速度の改善 画像遅延を使うと、ページが最初に表示されるときに必要なデータ量が減ります。そのため、ユーザーがページをすばやく見ることができ、サイトの使いやすさが良くなります。また、Googleはページの速さをランキングに影響する要素と考えているため、画像遅延を使うとSEO（検索エンジン最適化）にも良い影響があります。 2.バンド幅の節約 ユーザーが実際に画像を見るまで画像を読み込まないため、無駄なデータの転送が減ります。これもページのパフォーマンスを良くする助けになります。 3.クローラーへの影響 Googleのロボット（Googlebot）もページの読み込み速度に影響を受けます。ページが速く読み込まれると、Googlebotがより多くのページを素早く見つけて登録することができます。 [画像遅延を利用する際の注意点] サイトを表示したときにすぐに見える位置にある画像には、通常、画像遅延（Lazy Load）を適用しない方が良いです。 これは、ページが表示されたときに画像がすぐに表示されるようにするためで、ユーザーがページをスムーズに閲覧できるようにし、体験が向上します。 見える位置にある画像は通常通りに読み込み、それ以外の画像に対して遅延読み込みを設定するのが一般的です。 また、PageSpeed Insightsでサイトをチェックすると、見える位置にある画像に遅延読み込みを設定していると警告されることがありますので、その点も注意しておきましょう。 [まとめ] 画像遅延（Lazy Load）は、初期のページ読み込み時に必要なリソースを減らすため、ページの表示が速くなり、ユーザー体験が向上します。 バンド幅の節約にもつながり、無駄なデータ転送が減ることでページのパフォーマンスが改善されます。 クローラー（例：Googlebot）がページを速くクロールできるようになり、SEOに良い影響を与える可能性があります。 サイトが表示されたときに見える位置にある画像には遅延読み込みを適用せず、通常通りに読み込むことで、ユーザーの体験が向上します。 PageSpeed Insightsなどのツールで、見える位置にある画像に遅延読み込みを設定していると警告されることがあるので注意が必要です。 いかがでしたか？画像遅延がSEO対策の第一歩として役立つことを願っています。少しでもお手伝いできたら嬉しいです！

こんにちは、OmitデザイナーのHORiです。 今日の記事はウェビナーのバナーの作りかた、ポイントをご紹介していきます。 ウェビナーのバナーは、開催するセミナーの顔の役割を果たし、参加者にどれだけ興味を持ってもらえるかを決める重要な部分になります。 今回は「採用ブランディング」のウェビナー（架空のものです）を手順と注意点を踏まえて作成しました！ ウェビナーを開催するにあたって、自社でバナーを作るということも増えてくると思いますので、ルールやデザインのポイントと押さえつつ学んでいきましょう○ バナーを作る際の手順 １.バナーのサイズを確認する 配信元の規定サイズに従って作るようにする 2.バナーの目的を明確にする どんな人にどんな内容を届けたいのか、一番伝えたい情報は何なのかをはっきりさせ、一度すべて書き出してみる。 3.視認性を重視して大まかな配置を決める 文字は大きく、読みやすいフォントを使用。 背景とのコントラストを考慮して、目立つようにする。 4.情報を簡潔にわかりやすく表現する 必要な情報（タイトル、日付、時間、参加方法など）を短くまとめ、過剰な情報は避ける。 5.目的に応じたデザインをしていく 魅力的な画像やグラフィックを取り入れ、視覚的にインパクトのあるデザインを心がける。 6.他の人の確認 バナーを公開する前に、他の人に見てもらいフィードバックを受け、必要な改善を行う。 バナーを作る際の注意点 1.ブランドの一貫性が保たれているかの確認 企業や団体のブランドカラーやロゴを使用し、他のマーケティング素材と一貫性を持たせることで企業のブラウンディングにもなります。 2.推奨サイズの確認 配信元によって推奨サイズが違うことがありますので、まずは既定の推奨サイズを確認するようにしましょう。 3.画像解像度の確認 写真の解像度やロゴの解像度はガビガビにならないように書き出しの際に注意しましょう。 また、配信元の最大ファイルサイズが決まっているところが多いので確認して圧縮ソフトを利用して圧縮するようにしましょう。 おすすめの圧縮ソフトを記載しておきます！ https://tinypng.com/ 4.制作ソフトの確認 書き出しのファイル形式に応じてソフトを選びましょう。 今はCanvaなどでウェビナーのテンプレートをそのまま使えたりするので、デザイン難しい方はそちらを利用するのもいいと思います。 今回制作したバナーは「Z世代と採用」を題材としているので、若い勢いのあるデザインで、暗くならないよう意識して作成しました！  

プロジェクト管理、タスク管理、顧客管理は何を使っていますか？ 皆様はプロジェクト管理、タスク管理、顧客管理のためにどのツールをお使いでしょうか？市場には様々な管理ツールが存在していますが、弊社ではNotionを採用しています。 近年ではnotionの勢いは凄まじく、 弊社で採用しているNotionのご紹介 Notionは、シンプルかつ柔軟に情報を管理できるツールです。テキストやデータベース、ファイル管理、カレンダーなどを一つのワークスペースに集約することができ、従来の分散的な情報管理を大きく改善することができます。 特にプロジェクトの一元管理が可能であり、社内のコミュニケーションやタスク進捗の可視化を図ることができる点がNotionの大きな強みです。 弊社でのNotion活用例 ここでは、弊社がNotionを活用してどのように業務を管理しているかをご紹介します。 顧客管理: 顧客毎のデータベースを作成し、商談の進捗や案件履歴を簡単に確認できるようにしています。 プロジェクト管理: 顧客管理に紐づくプロジェクトをテンプレート等を用いて設定し、各タスクの進捗状況をチーム全体で共有しています。プロジェクトの金額を入力すると工数に変換し、プロジェクトに対しての合計工数を試算することができます。 タスク管理: プロジェクト管理に紐づくタスクを各メンバーの担当者別に分かりやすく分類し、デッドラインを設定して効率的にタスクを進行しています。また、タスクに紐づく時間はプロジェクト毎に集計され、売上管理にも繋がっていきます。 Notionを使った情報公開の傾向 最近では、Notionのページを活用してWebサイトのように公開している企業様も増えています。ブログや製品説明、サポートページとして利用することで、コストを抑えつつ柔軟な情報発信が可能です。 Notionを使うメリット Notionには様々なメリットがあります。以下に代表的な利点を紹介します。 多機能で一元管理が可能: メモ、タスク管理、プロジェクト管理、顧客管理などを一つのツールで完結でき、業務効率が向上します。 柔軟なカスタマイズ性: ページやデータベースを自由に構築でき、チームやプロジェクトに合わせた独自のワークスペースを作成可能です。 コラボレーションが簡単: リアルタイムでの共同編集ができ、コメント機能や通知機能でチーム内の連携がスムーズになります。 ビジュアル的に見やすい: テンプレートや豊富なフォーマット機能を使用し、視覚的に分かりやすいページが作成できます。 Notionを使うデメリット 便利なNotionにもいくつかのデメリットがありますので、ここでご紹介します。 動作が重くなることがある: ページが多くなると読み込みが遅くなる場合があり、動作に支障が出ることがあります。 一部の高度な機能が他ツールに劣る: 専用のプロジェクト管理ツールやタスク管理ツールに比べ、ガントチャートや進捗の自動更新などの機能が制限されています。 オフラインでは使えない: クラウドでのデータ管理のためオフラインでの利用ができません。 無料プランの制限: 無料プランではアップロード容量やメンバーの数に制限があり、企業規模によっては有料プランが必要です。 まとめ 弊社では、Notionを活用したプロジェクト管理やタスク管理だけでなく、デジタルトランスフォーメーション（DX）の支援も行っています。興味をお持ちの方は、お気軽にご相談くださいませ。   DX支援についてお問い合わせする

採用活動において採用ホームページは情報発信の基盤となる重要なメディアです。 エントリーを検討している求職者の方は、企業の採用ホームページを読み込むことで企業理解を深めます。 求職者の方が働く姿をイメージできる、そんな採用ツールがベストです。 今回の記事では採用ホームページに掲載したいコンテンツをまとめました。 ※募集要項など必須コンテンツは省略しています。 株式会社Omitでは採用ホームページ制作に力を入れています。 しっかりとした採用ホームページやパンフレットをご検討される際は、ぜひご相談ください。 4つのカテゴリに分類して整理 求職者の知りたいを4つのカテゴリにわけ、コンテンツを展開していきます。 会社を知る 仕事を知る 働く環境を知る 人を知る 1.会社を知る このカテゴリでは、求職者に企業の全体像を伝えることが目的です。企業の歴史、ビジョン、ミッション、価値観などを紹介し、求職者がその会社に共感できるかを判断する材料を提供します。以下のようなコンテンツが効果的です。 数字で見る会社 社員の平均年齢や男女比、年間有給取得率、平均残業時間など数値化できる部分をわかりやすく伝えるコンテンツです。客観的に会社を知れるコンテンツとしてぜひ入れたい内容になります。 働くメリット 会社で働くことで求職者が得られるメリットを訴求します。会社の安定性やスキルアップなど他社との比較をアピールできるコンテンツでもあります。 会社概要 会社の設立年、事業内容、規模、拠点、主要な顧客やパートナーなどの基本情報をまとめます。 企業理念・ビジョン 会社が目指している方向性や、働く上で大切にしている価値観をわかりやすく伝えます。会社が何を大切にしているかが明確になることで、求職者が共感しやすくなります。 2.仕事を知る このカテゴリでは、実際にどのような業務が行われているのか、具体的な仕事内容や職種を紹介します。求職者が自分に合ったポジションを見つけやすくするために、次のコンテンツを含めましょう。 仕事内容紹介 各職種の役割や具体的な業務内容を、わかりやすく記載します。日々の業務フローや、どのようなスキルが求められるのかを説明すると効果的です。 キャリアパス 社員がどのように成長していけるのか、昇進やスキルアップの具体的なステップを示します。キャリアアップのチャンスが明確になることで、求職者のモチベーションを高めることができます。 プロジェクト事例 実際のプロジェクトの成功事例や、チームがどのように協力して成果を出しているのかを紹介し、仕事の具体的なイメージを持たせます。 3.働く環境を知る 求職者が自分に合った職場かどうかを判断するためには、働く環境が重要です。福利厚生やオフィスの雰囲気など、働きやすさをアピールできるコンテンツを用意しましょう。 福利厚生 保険、休暇制度、教育・研修制度など、社員が働きやすい環境を整えるためのサポートについて詳しく説明します。 ワークライフバランス フレックス制度、テレワークの有無、育児支援など、生活と仕事のバランスを保つための制度について具体的に記載します。 オフィスツアー オフィスの写真や動画を用いて、実際の職場環境を見せることで、求職者が職場の雰囲気を感じやすくします。 4.人を知る 人材がどのように働いているのかを伝えることで、求職者に会社の文化や雰囲気を具体的にイメージさせることができます。 社員インタビュー 現在働いている社員のインタビューを掲載し、実際の業務内容や職場の雰囲気をリアルに伝えます。どのような理由で入社し、どのようなやりがいを感じているのかを共有することで、求職者に親近感を持たせることができます。 座談会形式のコンテンツ 複数の社員が参加する座談会形式で、仕事の楽しさやチームワークについて語るコンテンツを作ると、より自然な形で会社の魅力を伝えられます。 まとめ 採用ホームページは、企業と求職者をつなぐ最初の重要な接点です。株式会社Omitでは、企業の魅力を最大限に引き出す採用ホームページ制作をお手伝いしています。ぜひご相談ください。

こんにちは、代表の末吉です。今日は、多くの中小企業がDX（デジタル・トランスフォーメーション）に挑戦していますが、「何から始めればいいのかわからない」「自社の課題が見えない」と感じる方に向けて、業界ごとに成功事例を集めてみました。これらの事例をもとに、どのような対策をとるべきかを考える助けになればと思います。   1. 変圧器製造業 - 株式会社NISSYO   課題: 生産性向上とペーパーレス化 対策方法: • iPadを全従業員に配布: 現場の情報共有が迅速化し、ペーパーレス化が促進されます。例えば、従業員は紙の書類を扱わずにリアルタイムで情報を共有できます。 • 自社ポータルサイトにデータを集約: 生産管理や業務進行が一元化され、無駄な時間を削減。データは全従業員がいつでもアクセス可能です。 • IoTによる生産ラインのデータ収集: 生産ラインの状態を自動で監視・分析し、手作業を減らし、生産性が向上します。 結果: • EDI（電子データ交換）の利用率が87%に向上。 • 年間60万枚の紙が削減され、コスト削減と業務効率化を実現。   2. 金属加工業 - 株式会社リノメタル   課題: 生産管理の効率化と新規顧客の開拓 対策方法: • 28個のクラウドサービス導入: SlackやAWSなどのツールを組み合わせ、情報の流れをスムーズにします。これにより、生産進捗や管理の効率が格段にアップ。 • 生産管理システム導入: 製造現場の稼働状況を見える化し、工数削減を実現。必要なリソースやタイミングが自動で最適化されます。 結果: • 生産管理の工数が月間268時間削減。 • 大手自動車部品メーカーからの大型案件受注、売上が12.7億円増加。   3. 倉庫業 - 浜松倉庫株式会社   課題: 倉庫管理の効率化と収益性向上 対策方法: • 倉庫管理システム「SEIJI」の導入: 在庫管理や入出庫作業がデジタル化され、手動の記録や確認が不要になります。リアルタイムでの在庫状況の把握が可能。 結果: • 営業利益率が4.5%向上。 • 顧客サービスも向上し、顧客満足度が高まりました。   4. 不動産業 - トーシンパートナーズホールディングス   課題: 業務効率化と工数削減 対策方法: • 社内業務のデジタル化: 契約書や報告書など、紙ベースのプロセスをすべてデジタル化し、時間を節約します。 • ペーパーレス化: 書類管理がオンライン化され、スペースやコストの削減につながります。 結果: • 年間約8,800時間の工数を削減し、業務効率化とコスト削減に成功。   5. 廃棄物処理業 - 西原商事ホールディングス   課題: 廃棄物処理工程の可視化と効率化 対策方法: • 自社開発の廃棄物管理システム導入: 廃棄物の処理状況をリアルタイムで管理できるシステムを導入。これにより、工程の見える化が実現され、ミスや無駄が減少。 結果: • 業務効率化が進み、顧客サービスも向上。環境負荷の低減にも貢献しています。   6. 精密樹脂部品製造業 - 日進工業株式会社   課題: 生産性向上と競争力強化 対策方法: • IoT技術を活用した「MCM System」の開発: 製造ラインの稼働状況をリアルタイムでモニタリングし、生産の遅延やトラブルを迅速に発見・対応できます。 • 生産ラインの可視化: 各ラインの生産効率を把握し、改善が必要なポイントを迅速に特定して対策を講じます。 結果: • 業務効率化が進み、生産性が向上。生産性の低いラインが特定され、すぐに改善を行うことができました。   7. 銀行業 - 栃木銀行   課題: 従来型の企業文化の変革と業務効率化 対策方法: • 紙ベースの帳票を原則廃止: 紙に頼る業務をデジタルに置き換え、事務処理のスピードを大幅に向上。紙の書類作成や保管コストも削減。 • PC、スマートフォン、タブレットでの業務遂行: 従業員はデバイスからリアルタイムでデータにアクセスし、どこからでも業務を遂行できる体制を整備。 • CRMシステムの導入: 顧客情報の管理を効率化し、迅速な対応を可能に。顧客満足度も向上します。 結果: • 紙の使用量を年間140万枚削減。 • 事務作業時間を年間2万1,000時間削減し、コスト削減と業務効率化を実現しました。   8. 計測・制御機器製造業 - 株式会社木幡計器製作所   課題: 競合他社との差別化と人材不足 対策方法: • IoT技術の導入: 計測器に無線デバイスを搭載し、計測結果をクラウドに送信するシステムを開発。これにより、リアルタイムでのデータ取得と分析が可能になり、業務効率化が図られます。 結果: • 作業工数が削減され、業務が効率化。 • 医療機器事業にもIoT化を応用し、競争力を強化。   9. 輸送業 - 株式会社ヒサノ   課題: 業務プロセスの改善と働き方改革 対策方法: • 業務のデジタル化: 業務内容をデジタル化し、データを蓄積・分析することで、業務フローを効率化。 • 協力会社との連携強化: デジタルツールを利用し、リアルタイムでの情報共有と連携を強化。ドライバーの能力や業務進行の把握が容易に。 結果: • 業務プロセスの改善と、ドライバーの業務効率が向上。 • 働き方改革を実現し、従業員の満足度も向上しました。   10. 製紙業 - 鶴見製紙株式会社   課題: 業務のデジタル化とペーパーレス化 対策方法: • 10年間かけて段階的にデジタル化: 業務プロセスのデジタル化を計画的に進め、紙の点検表や伝票の電子化を推進。 結果: • 業務効率化を実現し、ペーパーレス化による環境負荷も低減。10年という長期間をかけたため、従業員の順応もスムーズでした。   11. 電子機器製造業 - 三共電機株式会社   課題: 間接業務の効率化 対策方法: • クラウドフローを導入: 業務プロセスをクラウド上で自動化し、手作業での手間を省く。各業務が自動で進行するため、間接業務の負担が軽減。 結果: • 間接業務の90%を自動化。業務効率が飛躍的に向上し、人件費の削減にもつながっています。   12. 飲食業 - 有限会社ゑびや   課題: 経営革新と業務効率化 対策方法: • ITを経営の中核に据える: 経営の全てのプロセスにデジタル技術を導入し、経営の効率化と革新を実現。特に、顧客管理や注文システムにITを活用し、運営の効率を向上。 結果: • 「経営革新企業」への転換に成功し、顧客満足度も向上。業務効率化により、リソースを他の成長分野に投入できる余裕も生まれました。   13.廃棄物処理業 - 西原商事ホールディングス   課題: 廃棄物処理工程の可視化と効率化 対策方法: • 廃棄物管理システムを自社開発し、処理工程をデジタル化。リアルタイムで処理状況を確認できる「見える化」を実現。 結果: • 業務効率化が進み、顧客サービスの向上を達成。環境負荷の低減にも大きく貢献しました。   14.システム開発業 - 株式会社福島コンピューターシステム   課題: コロナ禍での事業継続と業務効率化 対策方法: • クラウドサービスを積極的に導入し、リモートワーク環境を整備。社員が場所を問わず業務を遂行できる体制を構築。 結果: • 短期間でデジタル化を実現し、業務効率が向上。コロナ禍でも事業継続性が確保されました。   15.銀行業 - 株式会社鹿児島銀行   課題: 地域経済の活性化とキャッシュレス決済の普及 対策方法: • 地元に特化した機能を持つ独自のキャッシュレス決済システムを開発。地域特性に合ったサービスを提供。 結果: • 地域経済の活性化に貢献し、キャッシュレス決済の普及を促進しました。   16.小売業（書店） - 株式会社未来屋書店   課題: 在庫管理の効率化と顧客サービスの向上 対策方法: • AIを活用した需要予測システムを導入し、在庫を最適に管理。電子棚札システムにより、価格表示も自動化しました。 結果: • 在庫回転率が向上し、人的ミスが削減。業務効率化と顧客サービスの向上を達成しました。   17.建設業 - 株式会社大林組   課題: 施工管理の効率化と安全性向上 対策方法: • BIM（Building Information Modeling）を導入し、施工現場のデータをデジタルで一元管理。さらに、IoTセンサーを活用して現場管理システムを構築しました。 結果: • 施工効率が向上し、現場での安全管理も強化されました。   18.不動産業 - 株式会社エスクロー・エージェント・ジャパン   課題: 不動産取引の効率化と透明性向上 対策方法: • ブロックチェーン技術を活用した不動産取引プラットフォームを開発。スマートコントラクトにより契約プロセスを自動化しました。 結果: • 取引プロセスが簡素化され、透明性と信頼性が向上しました。   19.運輸業 - 株式会社ヒサノ   課題: 業務プロセスの改善と働き方改革 対策方法: • 業務内容をデジタル化し、データを蓄積・分析。協力会社との連携を強化しました。 結果: • 社内業務プロセスの改善やドライバーの能力向上が実現。働き方改革も進みました。   20.教育サービス業 - 株式会社スクー   課題: オンライン教育の質向上と受講者の学習効果改善 対策方法: • AIを活用して、個々の学習ペースに合わせた最適化学習システムを開発。ビッグデータを分析し、教育コンテンツを改善しました。 結果: • 受講者の学習効果が向上し、退会率も低下しました。   21.農業 - 株式会社サラダボウル   課題: 農作業の効率化と品質向上 対策方法: • IoTセンサーを活用し、栽培環境をリアルタイムでモニタリング。ドローンによる農薬散布も自動化しました。 結果: • 作業効率が向上し、収穫量と品質の両方が改善されました。   22.医療サービス業 - 医療法人社団KNI   課題: 医療サービスの質向上と業務効率化 対策方法: • AIを導入した画像診断支援システムを活用し、電子カルテシステムも高度化しました。 結果: • 診断精度が向上し、医療スタッフの業務負担が軽減されました。   23.観光業 - 株式会社JTB沖縄   課題: 観光客の満足度向上と地域経済の活性化 対策方法: • AR（拡張現実）技術を活用した観光ガイドアプリを開発し、ビッグデータ分析により観光客の行動パターンを把握。 結果: • 観光客の満足度が向上し、地域経済への貢献度も高まりました。   DXの事例を紹介、まとめてくださっているサイト: [1] https://menter.jp/blog/dx-examples-smes [2] https://metaversesouken.com/dx/dx/smes-success-stories/ [3] https://union-company.jp/media/dx-promotion-minor-enterprise/ [4] https://bolt-dev.net/posts/14940/ [5] https://service.customedia.co.jp/marketing/dx-smaller_companies/   これらの事例を通して見えてくるのは、DX化の成功には以下の要素が重要であるということです。   1. 具体的な課題の明確化: 自社が直面する課題を具体的に洗い出し、その解決策として適切なITツールやシステムを選定することが成功の鍵です。例えば、生産性向上を目的にするのか、コスト削減を目指すのか、課題によって選ぶ手法が変わります。 2. 適切な技術の選択: クラウドサービスやIoT、AIなどの技術をどの部分で導入すれば効果的かを見極める必要があります。既存のシステムとの相性や、社内のスキルレベルも考慮しながら、最適なツールを選びます。 3. 段階的な導入: DX化は一度にすべてを行う必要はなく、段階的に進めることが重要です。従業員の理解を深め、適応しやすい環境を作ることで、持続的な成果を得ることができます。 4. 従業員の協力: 新しいシステムを導入する際には、従業員の協力が不可欠です。研修やサポートを充実させ、現場の意見を反映しながらプロジェクトを進行することが成功に導きます。   自社のDX化を進める際に、これらの事例やポイントを参考にしながら、計画的に取り組んでいくことが大切です。 継続的な改善と革新を重ねていくことで、業務効率化や競争力強化を実現できると思いますので、外部の専門家に相談しながら社内でしっかり取り組んでみてはいかがでしょうか。    

慣性スクロールとposition:fixed要素のスクロール問題 簡単に慣性スクロールを実現できるライブラリ「lenis.js」を使用してウェブサイト制作をしていた際、一つの問題に直面しました。 ハンバーガーメニューやモーダルウィンドウなど、一時的にposition:fixed;で固定した要素内でoverflow:scroll;を適用しようとすると、挙動が不安定になることが分かりました。 この問題は、HTMLタグにlenis.jsのスクロール属性が影響しているため、固定要素内のスクロールがうまく機能しないことが原因と考えられます。 しかし、スクロールさせたい要素にたった1行追加するだけで解決することができたので、覚書としてブログに残しておこうと思います。 同じ状況でつまずいている方のお役に立てたら嬉しいです。 スクロール要素に属性を追加する スクロールさせたい要素にonwheel="event.stopPropagation()"を追加します。 //素の要素に… <divclass="scroll_box"></div> ↓ //属性追加！ <divclass="scroll_box"onwheel="event.stopPropagation()"></div> たったこれだけで解決できます！ まとめ この簡単な解決策を使えば、lenis.jsを使用した際のスクロール問題を回避できます。ぜひ試してみてください！

こんにちは、OmitデザイナーのHORiです。 今日の記事は印刷物やinstagramのサムネイルに使える写真と文字のレイアウトについてご紹介します！ 写真や文字のレイアウトは印象や視認性に直接影響するとても大切な部分だと思います。 今回は「雑貨屋さんのopenチラシ」を作成したので、これをもとに写真と文字のレイアウトについてやり方と注意ポイントを解説していこうと思いきます。 おしゃれで見やすいチラシにしたい！という方に参考になると思いますので、ゆっくり見ていってくださいね！ 株式会社Omitではホームページの制作からパンフレットやその他印刷物の作成を承っておりますので こんなチラシを作りたい！などご要望の際はお気軽にお問い合わせください。 写真レイアウト6選 まずは１つ目は、上半分に写真を持ってきて文字を下半分にまとめるやり方です 文字に重要な情報がある時は文字が読みやすいこちらのパターンをよく使います。 ２つ目は中央に写真を配置するやり方です。 写真に注目が集まりやすいので写真を見せたい時によく使います。ただ文字が脇役になりやすいのであしらいとして入れるのが○ 3つ目は写真を全面に配置するやり方です。 写真が大きいので、見せたいものを大きく見せることができます。これも文字が読みにくくなるので写真はシンプルなものを選ぶと○ ４つ目はうねうねの図形で写真をクリッピングするやり方です。 うねうね図形は垢抜け感があり、柔らかい印象も与えてくれるのでとても使いやすいです。 例えばロゴで切り抜くなどしても面白いかもしれないですね ５つ目は側面に写真を配置するやり方です。 重心が真ん中より写真側にずれるので、変化を持たせたい時におすすめの使い方です。 文字との重さのバランスをとってあげると○ 6つ目は写真を切り抜いて配置するやり方です。これが一番バランスを取るのが難しいかもしれないです。 写真の背景がない分商品がわかりやすくなります。   作り方手順 次に作り方を解説していこうと思います。 手順 1.必要な情報を書き出す事と、それに優先順位をつける。 2.先ほど解説したどのレイアウトが合うのかを決めていきます。 3.写真をグレースケールで置き、文字とのバランスを考えながら配置決めをしていく。 4.写真を入れて再度バランスを整えていく。 これで完成です！ 写真をあらかじめどんなものにするか、決めてからレイアウトを決めても○ ここは自分にとってやりやすい方法で進めて行けばいいと思います。 今回のデザインサンプル作成の時に作ったものを置いておきます、ご参考までに！   余談 最近Omitのディレクターの河相から「実力だけじゃ生き残れない！AIに職を奪われないためのスキルより大切なこと」というYouTubeに上がってる動画をおすすされ、たまたまタイムラインに流れてきたので見てみました！ 完結にいうと、これからの時代はいいデザイン、すごいデザインを作れるだけじゃ生成AIには勝てない！もっと中身に拘らなければいけないということでした。 中身とは なんでこのデザインにしたの？ 自分がデザイナーであることの意味って何？ 自分やる必要性って何？ 何を目的にデザインしてるの？ こんなところではないかと私は解釈しました。 前田高志さんの著書「愛されるデザイン」には 表面ではなく「内面」 共感ではなく「共鳴」 短期ではなく「持続」 一過性のものではなく「ずっと愛してもらえるデザイン」 これが大切と書かれているそうです。 動画内で心に引っかかった言葉が「デザインはマーケティングである。」ということ デザイナーにとってもクライアントさんにとってもデザインはただのツールでしかない 目的ありきのデザインでなければ、意味がない。 私自身、もっともっとデザインと自分に向き合って、日々考えながら 愛してもらえるようなデザイナーになろうと改めて思いました。