- 井上 みやび子
- すぐ使える株式会社 代表取締役
- 東京都
- Webエンジニア
対象:ホームページ・Web制作
- 原島 洋
- (Webプロデューサー)
- 井上 みやび子
- (Webエンジニア)
2012年ももうあと1週間ですね。
クリスマスは皆さまどう過ごされたでしょうか。(という常に微妙かつ意味のないセリフを呟いてみる...。)
さて私はもう長らく「すぐ使えるCGI」という名前のCMS(※)を売っています。このCMSの特徴は、製品としてはデザイン要素が何も入っていなくてダサダサ、それを、購入した方が調整して最終的にきれいなWebサイトに仕上げて頂くという点です。
※ 「CMS」とは
Contents Management System の略。Webサイトの内容をブラウザから更新するためのプログラム。
しかしこれはとにかく販売時に見た目がイマイチでアピールが難しい。設定の途中で挫折してしまう人もいます。よく「最終Webサイトまで仕上げてあげるサービスをすればいいのに」といったアドバイスはいただくのですが、実はこれは意図的にやらないできたのです。
その理由は、それぞれの方がそれぞれの仕事をして欲しい、と思うからです。Webデザイナの方がWebデザインを、社内担当者の方なら社内の方の希望を聞いた上でWebサイトを仕立てあげれば、それは(販売の目的だとしても)それぞれの方の財産として残ると思うのです。お金を出して最終製品を買う事は、誰にもできます。しかしそれだけをしていると、仕事の担い手としてのその人の価値を感じることがなかなか難しくなってしまします。
という事で「使う方がそれぞれ工夫を加える余地を残した状態で製品を販売する」という方針を採ってきたのですが、最近になりまして「そもそもどこからどこまで工夫を凝らせるのかがよく分からない」という状態である事に気付くに至りました。(7年近くかかった計算です...。orz)
という事で、今年は色々調整済のサンプルをご紹介しています。
その中から本日はWebサイトの中にファイルのダウンロードページを作るツールを2つご紹介します。
1ページに多数のファイルを表組で表示(図上)
これはひとつのトピックに関連して多数のファイルを表示したい場合のサンプルです(図上)。
例えばプロジェクト管理のための資料置場のような用途です。
掲載できる内容
- 1件につきアップロードできるファイル数は無制限
- 列数を指定して表組表示
- 記事は追加可能
調整ポイント
先ほどの「工夫の余地」について言えば「ファイルの数が決まっていなくてもきれいな表組の構成にできる」という点です。
これは実は昔は難しかったのですが、最近の技術である CSS(Cascading Style Sheet)と呼ばれる仕組みで調整を行っています。
少し技術的な話
具体的には、<dl> <dd> <dl> (定義リスト)を使って書き出したファイルの一覧を float を使って表のように見せています。
▼オンラインデモ▼
http://sugutsukaeru.jp/sample/276-file-list-table/admin/admin.cgi
▼製品ダウンロードはこちらからどうぞ▼
http://sugutsukaeru.jp/support/276/
「月次」などのシリーズファイルをすっきりと表示する(図下)
月ごとや四半期ごとにレポートや冊子などを発行する場合があるかと思いますが、その際に一連のシリーズファイルを並べて見やすく表示します(図下)。
掲載できる内容
- (一つのテーマに対する)シリーズファイルをアップロード。ファイル数は無制限。
- テーマ(記事)は追加可能
調整ポイント
こちらの調整ポイントは、多数のファイルのリンクを左から右に順番に並べて見せる所です。
検索エンジンなどが解釈しやすいように「これらは一連のファイルですよ~」という理論的構成を保ったまま、人間にも見やすく表示する点に少し工夫があります。
技術的な話
具体的には、<ol> <li> (番号付リスト)で書き出したファイルの一覧を float を使って横並べしています。
▼オンラインデモ▼
http://sugutsukaeru.jp/sample/277-file-series/admin/admin.cgi
▼製品ダウンロードはこちらからどうぞ▼
http://sugutsukaeru.jp/support/277/
このコラムに類似したコラム
CMSでらくらくホームページ作成 三井 博康 - Webプロデューサー(2013/12/05 16:04)
レスポンシブ Web デザインとは? 井上 みやび子 - Webエンジニア(2013/03/21 08:00)
★TryCMSニュース機能は、グループ追加でWebサイト内にいくつで… 三井 博康 - Webプロデューサー(2012/06/21 10:34)
簡単に自社サイトの更新が!オススメCMSのご紹介! 大林 麻由子 - Webデザイナー(2010/10/25 19:02)
そのスマホ対応は間違っている2〜 買う気にさせる97の脳科学マーケティング#9 谷口 浩一 - Webプロデューサー(2015/03/30 06:00)