CMS
ログイン
CMSへのログインは、こちら（ユーザIDとパスワードが必要です）
表デザイン・使用フォントの推奨スタイルについて
ホームページのリニューアルに伴い、サイトデザインが一新されました。そのため、以前のホームページには馴染んでいた「表やフォントのスタイル」が、新しいホームページではデザインが浮いてしまう場合がございます。また、リニューアルしたサイトデザインは非常にシンプルなため、多様な色を使うと、デザインを損ねてしまうことがあります。
そこでデザインの統一を図るために、共通のルールを設けることに致しました。推奨スタイルを使うことで、更新の際に事務的に作業ができるようになります。
※以下はあくまで推奨値であり、他のデザインやフォントの利用を禁止するものではありません
CMSの基本的作業につきましては、以下の「CMS3操作マニュアル」をご参照ください。
そこでデザインの統一を図るために、共通のルールを設けることに致しました。推奨スタイルを使うことで、更新の際に事務的に作業ができるようになります。
※以下はあくまで推奨値であり、他のデザインやフォントの利用を禁止するものではありません
CMSの基本的作業につきましては、以下の「CMS3操作マニュアル」をご参照ください。
表の推奨デザインについて
見出しの背景色は「#E5ECEB」を推奨します。
これは、サイドバー・下層リンクと同色になっています。できるだけページ内で使用する色数を制限することでデザインの統一を図っています。以下に見出し種類別の作成例を表示しています。
これは、サイドバー・下層リンクと同色になっています。できるだけページ内で使用する色数を制限することでデザインの統一を図っています。以下に見出し種類別の作成例を表示しています。
見出しが上部の場合
| 学部 | 学科 | 取得可能な学位 |
| 経営学部 | 経営学科 | 学士（経営学） |
| 心理経営学科 | 学士（心理経営学） | |
| スポーツ科学部 | スポーツ科学科 | 学士（スポーツ科学） |
| 情報学部 | 情報デザイン学科 | 学士（情報学） |
| 国際情報学科 | 学士（国際情報学） |
見出しが縦の場合
| 静岡産業大学＠SSU_OFFICIAL | |
| 静岡産業大学＠shizuokasangyo_university | |
| LINE | 静岡産業大学＠s-sandai |
| 静岡産業大学＠ShizuokaSangyoUniversity | |
| youtube | チャンネル名：静岡産業大学 |
見出しが上部・縦の両方の場合
| 学部 | 学科 | 取得可能な学位 |
| 経営学部 | 経営学科 | 学士（経営学） |
| 心理経営学科 | 学士（心理経営学） | |
| スポーツ科学部 | スポーツ科学科 | 学士（スポーツ科学） |
| 情報学部 | 情報デザイン学科 | 学士（情報学） |
| 国際情報学科 | 学士（国際情報学） |
見出しが無い場合
| 経営学部 | スポーツ科学部 | 情報学部 |
推奨するフォントスタイルについて
ページ内で使用する色数・フォントサイズなどのスタイルを制限することで、デザインの統一を図っています。フォントカラー・強調表現・フォントサイズ別の推奨値は以下のとおりです。
フォントカラーについて
基本的に使用する色は以下の３色。
- 黒（メインカラー）
- 赤（強調）
- 緑（スクールカラー）
強調表現について
基本、黒太字で強調することを推奨。さらに強調する場合は、赤や赤太字を使用する。
太字のみでも十分強調できていることが多いと思われます。あまりたくさんの色を使用すると、特に強調したい箇所が逆に目立ちにくくなってしまう可能性があります。
- [本文]黒
- [強調1]黒太字
- [強調2]赤
- [強調3]赤太字
太字のみでも十分強調できていることが多いと思われます。あまりたくさんの色を使用すると、特に強調したい箇所が逆に目立ちにくくなってしまう可能性があります。
フォントサイズについて
基本的にはメインの本文はフォントサイズを変更しない（FONTSIZE=100）。
部分的に強調（FONTSIZE=120）・注釈（FONTSIZE=80）などで対応する。
同ページ内で使用するフォントサイズが多くなりすぎないように注意が必要です。
フォントサイズがバラバラだと他のページとの調和がとれなくなったり、特に強調したい箇所が逆に目立ちにくくなってしまう可能性があります。
部分的に強調（FONTSIZE=120）・注釈（FONTSIZE=80）などで対応する。
同ページ内で使用するフォントサイズが多くなりすぎないように注意が必要です。
フォントサイズがバラバラだと他のページとの調和がとれなくなったり、特に強調したい箇所が逆に目立ちにくくなってしまう可能性があります。
使用例
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。（FONTSIZE=120）
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。※
※注釈など（FONTSIZE=80）
テキストが入ります。（FONTSIZE=120）
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。※
※注釈など（FONTSIZE=80）
推奨しない例
フォントサイズ変更・フォントカラー変更・太字・斜体など、複数のスタイルの使用
| SDGs×静岡産業大学 私たちは、持続可能な社会の実現に向けて何ができるのでしょうか。静岡産業大学では、産学官連携による独自の教育プロジェクトなどを通じて、より良い経済・社会・環境 づくりにアクションできる人材の育成を目指しています。 あなたも、社会のさま ざまな課題に取り組む力を獲得し、未来に 貢献する道への一歩を踏み出してみませんか？ |
この場合、最も強調したい部分「赤太字」が、必要以上に目立ってしまっています。そのため、他の部分ももう少し目立たせようと、フォントサイズを大きくしたり、青文字・太字・斜体を使用してしまいがちです。その結果、強調されている箇所が多すぎて「どこを見て良いか迷ってしまう」状態になっています。
本当に強調したい箇所の強調を弱めることで、その他の部分はデフォルトの表示でも問題がなくなり、すっきりとしたデザインにすることができます。
以下、改善例 ▶︎
本当に強調したい箇所の強調を弱めることで、その他の部分はデフォルトの表示でも問題がなくなり、すっきりとしたデザインにすることができます。
以下、改善例 ▶︎
| SDGs×静岡産業大学 私たちは、持続可能な社会の実現に向けて何ができるのでしょうか。静岡産業大学では、産学官連携による独自の教育プロジェクトなどを通じて、より良い経済・社会・環境 づくりにアクションできる人材の育成を目指しています。 あなたも、社会のさま ざまな課題に取り組む力を獲得し、未来に 貢献する道への一歩を踏み出してみませんか？ |
アップロードする画像について
大きい容量（サイズ）の画像をアップロードすると、ウェブサイトの表示速度が遅くなる原因になります。写真をアップロードする際には、画像容量の軽量化（適正化）にご協力ください。
また、レイアウトを整えるため、「トップページのTopics」および「学生生活のクラブ・サークル一覧」の見出し写真は画像の大きさを規定させていただきます。アップロードする前に画像のリサイズをお願いします。
また、レイアウトを整えるため、「トップページのTopics」および「学生生活のクラブ・サークル一覧」の見出し写真は画像の大きさを規定させていただきます。アップロードする前に画像のリサイズをお願いします。
| カテゴリー | 規格 | |
| 画像容量（サイズ） | 全ての画像 | 500KB以下を推奨 |
| 画像の大きさ | TOPICS見出し | 320×215px ※ |
| クラブ＆サークル見出し | 272×172px | |
| その他、本文内画像 | 規定なし（横幅1000px以下を推奨） |
※サイトリニューアルにより規定サイズ変更
リサイズ後の写真見本
横幅1000px（523KB）
横幅1000px（79KB）
上記の例では、523KBと79KBの画質の差は目では確認できないレベルです（クリックで拡大表示）。
サイトで使用する場合、79KBの方の画像でも問題が無いことがわかります。ただし、画像によっては同じ79KBでも粗が目立つことがあるかもしれません。サイトで使用する大きさで、問題なく表示できる程度に適宜調整してください。
また、画像の大きさについてデジカメやスマートフォンで撮影すると横幅4000pxなどのとても大きな画像になることがあります。上記の例でも確認できるように、大学サイトで使用する際は横幅1000pxでも十分な大きさです。TOPICSやクラブサークルの画像のように規定のサイズはありませんが、横幅が1000px以下になるように縮小することを推奨します。
画像容量や大きさの確認方法・リサイズ方法などの詳細は、下記PDFをご参照ください。
サイトで使用する場合、79KBの方の画像でも問題が無いことがわかります。ただし、画像によっては同じ79KBでも粗が目立つことがあるかもしれません。サイトで使用する大きさで、問題なく表示できる程度に適宜調整してください。
また、画像の大きさについてデジカメやスマートフォンで撮影すると横幅4000pxなどのとても大きな画像になることがあります。上記の例でも確認できるように、大学サイトで使用する際は横幅1000pxでも十分な大きさです。TOPICSやクラブサークルの画像のように規定のサイズはありませんが、横幅が1000px以下になるように縮小することを推奨します。
画像容量や大きさの確認方法・リサイズ方法などの詳細は、下記PDFをご参照ください。
メディア管理について（タグ設定）
画像・PDFなどのファイルをアップロードする際「タグ」を設定することができます。
※基本的な作業要領は上記PDFをご参照ください。
タグを設定することで、その後アップロード済みの画像を検索する際に関連画像を検索することができます。
既に作成済みのタグを選択するか、今後必要となりそうなタグを個人で作成することができます。
ただし現状、タグは並び替えができません。そのためタグの数が多くなってしまうと、検索する際に該当するタグを見つけるのが難しくなります。不要なタグを作成しないために作成する前に以下の点をご確認ください。
※基本的な作業要領は上記PDFをご参照ください。
タグを設定することで、その後アップロード済みの画像を検索する際に関連画像を検索することができます。
既に作成済みのタグを選択するか、今後必要となりそうなタグを個人で作成することができます。
ただし現状、タグは並び替えができません。そのためタグの数が多くなってしまうと、検索する際に該当するタグを見つけるのが難しくなります。不要なタグを作成しないために作成する前に以下の点をご確認ください。
- 違う名称だが、同じ内容のタグが既に作成されていないか
（例：「学園祭」と「文化祭」、「PDF」と「pdf」） - 同じ件に関するタグはまとめられないか
（例：「〇〇会議議事録」「〇〇会議写真」→「〇〇会議」） - 今後新しいワードで検索する必要がないものは新しくタグを作成しない
→「既存のタグの使用」「検索しやすいファイル名の設定」でご対応お願いします。