ant2マガジン
2023年07月
2023.07.26
ant2 CMSの画像やファイルの管理・外部サービスについて
こんにちは。
アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回はant2 CMSで利用できる画像やファイルの管理、外部サービス（フリー素材ダウンロード・画像編集サービス）についてご紹介します。
ant2 CMSの編集画面に表示されるコントロールパネル
まずはじめに、ant2 CMSで利用できるファイルについてご紹介します。
ant2 CMSでは画像やPDFなどの各種ファイルを「サーバーブラウザー」で管理しています。
「サーバーブラウザー」は、[画像の管理]と[ファイルの管理]に分けられており、それぞれでアップできる拡張子が一部異なります。
また、サーバーブラウザーの表示も[画像の管理]では画像のサイズを指定、または画像サイズの自動縮小の選択を行った上でアップできますが、
[ファイルの管理]では画像のサイズの指定や自動縮小などの設定は行うことができません。
各サーバーブラウザーにアップできる拡張子とサイズの上限
拡張子は数多く存在し、ファイルによって特徴があり、それぞれの特徴や用途によって使い分けが必要となります。
また、拡張子によっては拡張子を変更すると開けなくなるものや自分が思っているかたちで表示されないもの、ファイル自体が拡張子の違いによって壊れてしまうものもあるので注意が必要です。
ant2 CMSでは、各サーバーブラウザーにアップできる拡張子が異なるため、使用されたい拡張子を確認の上、管理していただくかたちとなります。
| 拡張子 |
3fr、ai、arw、bmp、cr2、crw、dcs、dcr、dng、eps、erf、gif、jpg、jpeg、kdc、mef、mos、mrw、nef、nrw、orf、pef、png、psd、r3d、raf、rw2、rwl、sketch、sr2、xd、svg、svgz、tif、tiff、x3f、3gp、3gpp、3gpp2、asf、avi、dv、flv、m2t、m4v、mkv、mov、mp4、mpeg、mpg、mts、oggtheora、ogv、rm、ts、vob、webm、webp、wmv、swf、jpg、gif、jpeg、png、tiff、tif、swf、fla、flv、zip、txt
|
|---|---|
| 上限 | 32MB |
| 拡張子 |
csv、doc、csv、doc、docm、docx、ods、odt、otf、pdf、ps、rtf、ttf、xls、xlsm、xlsx、odp、pps、ppsm、ppsx、ppt、pptm、pptx、3fr、ai、arw、bmp、cr2、crw、dcs、dcr、dng、eps、erf、gif、heic、jpg、jpeg、kdc、mef、mos、mrw、nef、nrw、orf、pef、png、psd、r3d、raf、rw2、rwl、sketch、sr2、xd、svg、svgz、tif、tiff、x3f、3gp、3gpp、3gpp2、asf、avi、dv、flv、m2t、m4v、mkv、mov、mp4、mpeg、mpg、mts、oggtheora、ogv、rm、ts、vob、webm、wmv、swf、aac、m4a、mp3、oga、wav、as、as3、asm、cpp、cs、css、cxx、diff、erb、erl、groovy、gvy、h、haml、hh、hxx、js、json、jsx、less、lst、markdown、md、mdown、mkdn、ml、mm、out、plist、properties、sass、scm、script、scss、sml、sql、txt、vb、vi、vim、webp、xhtml、xml、xsd、xsl、yaml、yml、htm、html、lzh、zip、tar、gz、7z、rar
|
|---|---|
| 上限 | 32MB |
サーバーブラウザー「画像の管理」と「ファイルの管理」の表示の違い
1
画像の管理
サーバーブラウザー画面左上のファイルタイプが「Image」となり、画像アップ時に画像のサイズを指定、画像サイズの自動縮小の選択を行うことができます。
2
ファイルの管理
サーバーブラウザー画面左上のファイルタイプが「File」となり画像の管理のように画像サイズの指定等を行うことはできません。
画像の挿入・変更とファイルの表示について
各サーバーブラウザーにアップした画像やファイルはコンテンツパーツまたはフルエディタ編集で挿入することができます。
■画像の挿入・変更方法
画像の挿入は2パターンあります。
1．追加したい箇所の上にあるコンテンツパーツ上でマウスを長押しします。
2．“コンテンツパーツパネル”が表示されますので、[追加]ボタンをクリックします。
3．“コンテンツパーツサイドバー”が表示されますので、カテゴリーの「画像」をクリックし、画像を使用したコンテンツパーツの一覧から使用したいパーツをクリックすると、選択したコンテンツパーツが配置されます。
4．配置されたパーツの画像上でダブルクリックをすると、“サーバーブラウザー”が立ち上がりますので、挿入したい画像をクリックして完了です。
1．画像を挿入したい位置にカーソルを置き、ツールバーの[画像の挿入／編集]ボタンをクリックします。
2．“イメージプロパティ”の設定画面が表示されますので、[サーバーブラウザー]ボタンをクリックして、“サーバーブラウザー”を立ち上げます。
3．立ち上がったサーバーブラウザーから挿入したい画像を選択します。
4．設定画面の「URL」と「幅」、「高さ」に数値が自動的に入力され、プレビューが表示されます。
■ファイルの表示方法
サーバーブラウザーにアップしたファイルを表示させるためにはリンクの挿入が必要となります。
1．編集画面でリンクを設定したいテキストや画像を選択します。
2．ツールバーの[リンク挿入／編集]ボタンをクリックします。
3．“ハイパーリンク”の設定画面が表示されるので、、[サーバーブラウザー]ボタンをクリックして、“サーバーブラウザー”を立ち上げます。
立ち上がったサーバーブラウザーからリンク表示・ダウンロードさせたいファイルを選択します。
4．ファイルを選択すると[URL]にサーバーブラウザーの情報が自動的に入力されます。
選択したファイルに問題がなければ「OK」をクリックしてリンク設定完了です。
素材サイトのご紹介
ant2 CMSでは高クオリティなCC0ライセンスの画像やイラストなどの素材を配布している無料の素材サイトから直接サーバーブラウザーに素材をダウンロードすることができます。
使用できる素材サイトは[pixabay][Unsplash]の2種類あり、それぞれ高クオリティな素材を取り扱っています。
pixabay
日本語でのキーワード検索や新着順、人気順での並び替えに対応しています
Unsplash
カテゴリーで分類、キーワード検索は英語に変換されます
それぞれのサイトからダウンロードした素材は各フォルダに追加、保存されます。
pixabay
Unsplash
どんなときに素材サイトを利用するの？
例えば、前回ご紹介した『初期データ』を使ってWebサイトを作成した際、サイトを作成したもののひな形として挿入されている画像素材がサイトの目的とあっていない、デザインは気に入っているが画像を変えたい！といった場合には上記の素材サイトから挿入したい素材のキーワードを入力し、探すのをおすすめしています。
初期データについてはこちら『テンプレートからすぐにサイトを制作できる！ant2 CMSのOEMサービスで利用できる初期データについて』
また、過去のメルマガ『フリー素材サイトについて』では、フリー素材とは何か、フリー素材を使う時の注意点、上記のant2 CMSと連携して使用できるフリー素材サイト以外のおすすめサイトもご紹介していますので是非ご覧ください。
外部の画像編集サービスについて
[画像の管理]にアップした画像や素材サイトからダウンロードした画像は[Photopea]または[TOAST UI]で編集することができます。
どちらもブラウザで使用できるインストール不要、日本表記対応済みの無料の画像編集ツールとなります。
画像編集ツールの使用方法
この画像を実際に画像編集ツールを使って編集していきます。
[画像の管理]より編集したい画像の右上に表示されているメニューから画像編集ツールを選択します。
Photopea
細部までこだわって編集したい方におすすめ
ツールバーには切り抜きツールやスポット修復ブラシ、ブラシツール、消しゴム機能、テキストツールなど様々なメニューが用意されており、画像の明るさレベルなども調整でき、細かく編集することができます。また、サイドバーでは、レイヤーの削除や追加、フォルダ作成などが可能です
保存の際にはPNGやJPG以外にも多様なファイル形式での保存が可能です。
TOAST UI
より直感的に画像編集ができる
Photopeaよりもメニュー表示が簡易となり、明度反転や切り抜き、図形やテキストの挿入など直感的に操作しやすいメニューとなっており、より簡単に編集を行っていただくことができます。
編集ツールで画像を編集したあとは各ツール内で「保存」すると、元画像があるフォルダ内に編集した画像が追加されます。
自動でサーバーブラウザーに保存されるため、画像をアップする手間を省くことができます。
まとめ
今回はant2 CMSの画像やファイルの管理方法やant2 CMSのブラウザ上高クオリティな素材をダウンロードできる外部サービス、画像編集サービスについてご紹介しました。
ant2 CMSでは簡単に画像の挿入・変更ができることに加え、わざわざ素材を探しにいかずともCMS上で素材探しができるサービスや編集できる外部サービスもご利用いただくことが可能となっています。
編集機能など実際に使ってみないとどういった機能が使えるのかわからない！といった方は是非、この機会にデモサイトでお試しください。
2023.07.12
テンプレートからすぐにサイトを制作できる！ant2 CMSのOEMサービスで利用できる初期データについて
こんにちは。
アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回は前回のメルマガ『簡単に設定！ant2 CMSでできるSEO対策（3）-ユーザビリティを意識する-』でも少しご紹介した【初期データ】についてご紹介します。
ant2 CMSの初期データ
ant2 CMSのOEMサービスでは簡単にWebサイトを制作できるように『初期データ』という名前で業種別のひな形テンプレートをご用意しています。
初期データは沢山の業種にあったデザインのテンプレートをご用意しているため簡単に業種にあったWebサイトを制作することができます。
気になる初期データは後ほどご紹介します！
初期データを使うメリット
- 短時間でWebサイトの制作ができる
ひな形テンプレートに、ダブルクリックで簡単にテキストの編集や画像の変更ができるため自分でデザインやコーディングを行う場合と比べて制作時間を削減することができます。
そのため、早い納期でWebサイトを納品することが可能となります。 - 初期データの画像素材はそのまま利用できる
初期データで使用している画像はフリー素材を利用しているため画像を変えず、そのまま利用していただくことが可能となっています。
サイト名などの最低限変更が必要な箇所のみの変更でオリジナルのWebサイトを制作することができます。 - 低予算で制作することができる
一から制作会社に制作を依頼する場合、数十万円から数百万円かかることが多いですが、初期データを使うことで費用を抑えて制作することが可能です。 - デザイン性が高いWebサイトを制作することができる
デザインに慣れていない人でもWebサイト全体の統一感を出すことができ、お洒落なサイトをレイアウトを崩さずに制作することができます。
また、業種にあったテンプレートをご用意しているので、ジャンルやイメージカラーにあった使い勝手のいいサイトを制作することができます。
Web制作を行う際の流れの違い
通常、Web制作の流れとしては大きくわけて次の5つのステップがありますが、初期データを使用することで企画段階でユーザーへ提案することができ、ステップ1～3までにかかる時間を大幅にカットすることができます。
一般的なWebサイト制作の流れ
（コーポレートサイトの場合約1～3ヶ月）
1.企画・サイト設計
2-1.デザイン制作
2-2.サイト制作
3.ユーザー確認
4.公開準備
5.納品・サイト公開
初期データを使った場合のWebサイト制作の流れ
（コーポレートサイトの場合約1ヶ月）
1.企画・サイト設計
2.初期データを使用してサイト制作
3.ユーザー確認
4.公開準備
5.納品・サイト公開
ご利用いただける業種別初期データのご紹介
現在ご利用いただける初期データは50業種以上、ひな形テンプレートとしては120種類以上ご用意しています。
初期データは毎月3つリリースしているため今後も随時リリース予定です！
今回は弊社でご用意している初期データの一部をご紹介します。デモサイトもご確認いただけますので是非ご覧ください。
小児科
- 小児科
コワーキングスペース
- コワーキングスペース
ネイルサロン
- ネイルサロン
ゲストハウス
- ゲストハウス
アパレル
- アパレル
オンラインセミナー
- オンラインセミナー
- LP
オンラインショップ
- オンラインショップ
- EC
インテリア
- インテリア
実際に初期データを使ったWebサイトを作成したい方はデモ登録サイトよりご確認ください。
初期データとサイトデザインの違い
前回のメルマガではサイトデザインの変更方法についてご紹介しました。『簡単に設定！ant2 CMSでできるSEO対策（3）-ユーザビリティを意識する-』
初期データとサイトデザイン、デザインを変更できるという点に於ては似ているため混合してしまっている方も多いかもしれません。
しかし、初期データでのサイト制作とサイトデザインの変更は根本的な違いがあります。
初期データでできること
- 業種に合ったWebサイトを簡単に制作することができる
- 弊社から提供している「公式初期データ」だけでなく「オリジナル初期データ」を登録し、オリジナル初期データの内容でサイトを制作することができる
⇒業種やジャンル別のデザインテンプレートを使ってWebサイトを簡単に制作することができる
サイトデザインでできること
- サイトのカラーやレイアウトを変更することができる
- 初期データで作成したサイトを他のデザイン・レイアウトにしたい場合に使用する
⇒サイトデザインを変更することによってサイトのカラーやレイアウトが変わるので、サイト全体の見え方を一括で変えることができる
以上のように、初期データを使用した場合は多数ご用意しているひな形テンプレートから簡単にWebサイトを作成することができ、その上でレイアウトやカラーを変更したい場合はサイトデザインを使った見せ方変更を行うことができます。
ヘアサロンの初期データでサイト作成した場合
サイトデザインを変更した場合
画像やテキスト、メニュー構成などは引き継がれますが、レイアウトやカラーがデザインのタイプによって調整・変更されます。
サイトデザイン：type35
サイトデザイン：type40
まとめ
今回はant2 OEMサービスでご利用いただける初期データについてご紹介しました。
初期データを利用することで制作時間を短縮でき、見栄えのいいWebサイトを制作することができます。
また、初期データは弊社から提供している業種別のひな形テンプレートだけでなく、代理店様側で制作されたオリジナルの初期データを登録することが可能となっています。
オリジナルの初期データを登録することでよりデザイン性があるWebサイトを制作することもできますので
是非、この機会に初期データを利用いただけるant2 OEMサービスをご検討ください。
- 1 / 1
