For non-Japanese speakers

All the articles and content on this website are written in Japanese. If you would like to read them in a different language, please use the translation function on your browser. You may not be able to understand the finer points of the text, but you should be able to get the general idea.

WordPressで作成した記事をDrupalで作成

WordPressで作成した記事をDrupalで作成し比較してみます。このWEBサイトがCivicThemeで政府機関や教育機関のWEBサイトを構築するために最適化されているので、個人のライフスタイルでファッションに関わる記事自体がCivicThemeに向いていないという事はありますが記事を書いて気がついた利点もありますのでそのあたりをまとめていきます。

Blog記事の比較

Drupalを使用した目的の一つに、文字の読みやすさや情報整理の秀逸さがあります。選んだCivicThemeがこの記事やサイト内の構成、それを見せるパーツが非常に秀逸で、サイト内の構成や必要な情報をあえて閲覧者が意識しなくても自然と閲覧したい情報を選び辿り着けるように作られています。その恩恵がどのようになっているかをWordPressで作成した同じ記事と比較してみます。まだ記事数が少なくサイト構成や記事検索は詰めきれていないのでページ単体の記事の見やすさを基準に考察します。

WordPressで作成したWEBサイト

衣食住をテーマに知人のお店を紹介出来たらと考えBlog形式で50代のライフスタイルを提案するような形でWEBサイトを作っています。なかなか時間が取れずWEBサイト構築以降更新が止まっていますが時間を見つけて再開して行きます。

構築のルール

  1. 全ての写真を自身で用意
  2. 著作や肖像権は全てフルオリジナルとするため私自身以外の写真と私自身所有するもの以外原則使わない事
  3. 私自身の写真を一人で撮るので写真は全てセルフィー
  4. デジタル一眼を使い写真のクォリテーは落とさない事
  5. 50代を超え還暦が近い私自身がモデルになっているので見苦しくない写真を用意する事
  6. ルックスが良いわけではないのでサングラスや帽子を用意し私ではなく紹介する衣類などが引き立つ写真を用意する事
  7. 記事は全て自身の体験による記事

などを考慮しています。

オリジナリティーにこだわったルールを決めて素材を用意しWEBサイトを構築しています。使用したテーマは純国産のWord Pressテーマを多数開発し販売しているTCDさんのBloomというテーマを使用しています。

早速ですが、Word Pressで構築したWEBサイトの記事とDrupalで構築したWEBサイトの記事を比較してみます。

Word PressとDrupalで作成した記事の比較

以下のリンクでそれぞれの記事がご覧になれます。同じ内容の記事ですが全く別の記事に見えます。Drupalで作成した記事は写真枚数が少なく記事の整理が視覚的にわかりやすいので読みやすく感じると思います。

IWC Mark11 (RAF)の記事 WordPress (Opens in a new tab/window)

WordPressで作成したIWC Mark11 RAFの記事になります。アンティークのミリタリーウォッチの記事になり記事内容はあまり詰め込まず、ほどほどの文章量で書いた記事になります。WordPressのテーマに右サイドメニューやフッターの構成があり複数の記事に移動出来るように構成していますが、見直すとDrupalで作った記事に比べ少し乱雑に見えてしまいます。

IWC Mark11 (RAF)の記事 Drupal

IWC Mark11 RAFの記事をDrupalのCivicThemeで作成しています。写真の枚数は減らしています。WordPressのテーマと構成が右サイドメニューやフッターにタグやカテゴリーを配置しサイト内を移動し他の記事を見て回れるように構成したことに比べ、Drupalの記事は簡単な左サイドメニューにページリンクを設置し、タグやカテゴリー使っていません。この辺りはこのWEBサイトの情報を増やしていった時に考えていくと思いますがその事を考慮しても、記事自体はDrupalの記事の方が見やすいのではないでしょうか?

WordPressで作ったページの特徴

WordPressのページというよりWordPressに用意されたテーマのページという方が正しいのですが、WordPressに用意されたテーマのデザインがWordPressの形に準じています。こちらのページはWordPressという括りでもありますがごくオーソドックスなBlogサイトのデザインとも見て取れます。

  1. タイトル > 本文 > タグやカテゴリというページを内部整理する情報。
  2. META情報やサムネイル表示される画像。
  3. ページを作成するためのブロック構造や本文をテキスト入力する際の装飾。
  4. 画像の配置など
  5. ヘッダー - サイドバー - フッター にタグやカテゴリーを追加

ごくオーソドックスなWordPressに標準的に用意されるブロックとインターフェースにて構築されています。洒落たイメージに見える要素の一つに利用する配色を抑え、モノトーンでページを構成する事で、モダンなイメージを演出しています。

洒落たイメージを持つ為、使用フォントは2種類、文字サイズも、ページの空間を上手く開けるようにデフォルトで指定され特に変更しなければ、テーマを開発したTCDさんがイメージする洒落たブログデザインとなるように構成されています。

後述するDrupalで作成したページとの違いは、文字に対する考え方と、段落の区切りに何を用いるかという点であります。

一般的にHタグを上手く使い、文章や段落の区切りを閲覧者にわかるように作成するようにページが構成されていますがHタグを使い大きな文字を使うとデザインが一気に崩れ、せっかくの洒落たデザインが台無しになってしまいます。

私はそれが嫌だったのでHタグはH3よりも小さなものをメインで使い、段落の大きな区切りはセパレーターの罫線で区切り文章を整理しています。

Drupalで作ったページの特徴

DrupalもWordPress同様、Drupalのページというより、選択したCivicThemeのページというのが正しいです。WordPress同様Drupalに用意されたテーマのデザインがDrupalの形に準じています。

  1. タイトル > ※META内にタグ > 本文
  2. META内のタグに、カテゴリやタグに該当するSiteSelectionやTopicというページの内容をカテゴリー分けし内部整理する情報。
  3. サムネイル表示される画像。※現在使用していません。
  4. ページを作成するためのブロック構造や本文をテキスト入力する際の装飾。
  5. 画像の配置など
  6. ヘッダー - サイドバー - フッター にメニューとViewで選定したページリスト、検索、外部リンクを設置

こちらもごくオーソドックスなWEBサイトの要素で構成されています。

ページ構成は本文に幾つかの便利なウィジェットが用意されておりこのウィジェットを上手く使い、文章や段落を整理しながら記事を作成して行きます。このウィジェットが秀逸で実際このページを作成するのにも利用しています。

この事により、段落や文書の分類がわかりやすくWordPressで作成した記事より、文書が読みやすく構成出来ていると感じるのではないでしょうか。

WordPressのテーマの特徴に写真を多数入れたくなるのですが、Drupalのテーマの特徴に写真は必要最低限で良いのではないかと感じます。私自まだ使い初めて日が浅く内容が未熟なDrupalについて記事を書いていますが、写真や画像の必要性を全く感じていないのも、DrupalやCivicthemeがテキストベースの情報密度の高いコンテンツの作成に向いているという事の現れでないかと感じています。

WordPressとDrupalでの記事作成に感じる事

WordPressが写真などを効果的に配置しながら記事を作成する事に向いているという事に対し、Drupalは同じ記事でも写真は最低限で、文書の内容と物量、効果的な段落などを自然と考えて記事を作成する事に向いています。LifeStyleのファッションの記事においても、 WordPressだと、5枚程度の写真は最低限用意し配置しないと、記事が寂しく感じます。Drupalだと1枚で十分なんじゃないかと感じ、写真を使い記事のボリュームを上げるより、記事を要約しまとめ、多くの情報を入れる事に注意が向いて行きます。

前項で、軽く触れた、WordPressは記事作成もその場のインスピレーションで作成していくような感覚とDrupalは情報密度を考え、記事の配置や分類を考え、その場のインスピレーションというより事前の構築準備を進めて記事を作成するような感覚があります。レイアウト面はインスピレーションのような要素がありますが、一度ベストなレイアウトを組み上げるとそのベストなレイアウトに沿って新たに記事を作成していけるので、そういったシステムの構造的なものも影響していると感じています。

WordPressの秀逸なデザイン性

写真の閲覧を尖ったデザインで実現出来るWordPress定番のビルダーElementorを使い構築した白黒写真のコラージュ的なページと、白と黒だけでまとめた解説ブログ、同じ白黒写真を使い記事をまとめたDrupalのページも比較してみます。Word Pressで作った記事内容が全て英語になっており、Drupalで作った記事は日本語となっていますので、単純なデザイン比較というより、システム環境が導いたデザインという観点でご覧いただけると比較の意図が理解しやすいと思います。

少しデザインに凝ったWordPressのページ (Opens in a new tab/window)

WordPressには優秀なプラグインが多数あります。有名なデザインツールでもあるページビルダーのElementorを使うとフルスクリーンやコラージュ的なデザインを簡単に作れてしまいます。私もWordPressで使用していますが、コードを意識せずドラッグアンドドロップでページを構築出来ますし、元々用意されるテンプレートのデザインもハイレベルなのでWEB構築やプログラミングの知識がなくてもプロのクリエーターが作るようなページを簡単に作れます。

このページはElementorに写真のコラージュ的なデザインテンプレートがあったのでその機能を使ってみようと思い作成したページになります。全てモノクロ、写真は4:5のフォーマットでまとめています。

こういうデザインをあまり知識を持たない人でも簡単に構築出来る事もWordPressの優れた点であります。

上記コラージュを補足したブログ (Opens in a new tab/window)

上記同様、Elementorを使って写真記事のブログを作成しています。このWEBサイトが英語になっているのは、海外の写真関係のWEBサイトに写真をポストし、受け先のページを作るという目的で構築したので全て英語にて作成しています。内容はコラージュで使用した写真のアスペクトが8*10のアスペクトにしていますがこの比率はフィルム写真の大判の比率で、大判写真は写真初期の19世紀から使用されているフォーマットで当然白黒です、現在の2*3の比率のデジタル写真を19世紀の写真みたいに仕上げクリエイティビリティーを上げてみよういった内容になっています。

Drupalでモノクロ写真を使い記事を書いてみます。

上記のElementorを使いモノクロイメージで構築したページとは異なりますが、Drupalで白黒写真を使い記事を書いています。日本語で愛用品の説明をしていますので、毛色は異なりますが、全くの別物になります。この別物というのが、Elementorはスペースの空間が多く、そのスペースを埋める必要があるため、どうしても写真の数が多くなります。これは足し算の発想ですがDrupalは記事が見やすく配置されているので、極論いえば写真がなくても成り立つので写真は1枚の構成でこちらは引き算の発想となります。

比較をまとめてみます。

Word PressとDrupalで記事を作成しそれぞれを比較していますが、それぞれが持つ仕組みやその事により何を目的としてページを構築するかというCMS固有のテーマや機能に最初から組まれた環境が、ページや記事を作ると自然と出来上がるページに反映されそれぞれ似た内容でも出来上がるものが別物になるという事をお伝えしたかった記事になります。

私の悪い癖で記事が冗長になり無駄に長い文章が散見する記事になりがちで、伝えたい事がなかなか伝わりにくい記事になっていますが、Word Pressを選択する利点、Drupalを選択する利点をそれぞれが提供する環境から出来上がるページデザインから感じていただければと考えて書いた記事になります。

Word Pressが個人や小規模な企業や会社、個人のクリエーターの利用が多く、実際にそのようなWEBサイトの構築に向いていると言われる理由に、写真のコラージュは極端ですが、こういうページを比較的簡単に作れる事があります。

膨大な情報量を必要とせず配信する情報にデザイン要素を含め、閲覧するユーザーもそういったデザインを好むユーザーに向けて、閲覧するユーザーへの視覚的インパクトを含めた情報配信の形式を自然と構築しやすい事が、Word Pressを個人や小規模な企業や会社が好み、利用されているのは当然と言えば当然と考えられます。

このWord Pressで構築したデザインに凝ったページを大企業が使うかと言われるとおそらく答えはNoとなります。大企業が情報配信を行う際に気に掛ける要素は、デザインに凝ったものより、より多くの閲覧者に正確に情報を届けるという公共性や社会性を重視しており、シンプルなテキスト情報とその情報密度や正確性と理解のしやすさを優先するのは当然です。

この事からDrupalにデフォルトで用意される環境でもある情報量の処理や整理、閲覧しやすさという機能が好まれ大企業、大量の情報をWEBサイトで配信する企業や団体がDrupalを利用するというのも納得できます。

Word Pressで構築したWEBサイトの説明

次項はこちらで紹介したWord Pressで構築したWEBサイトの説明をしたいと考えています。私の悪い癖ですが記事内容が冗長になり無駄に記事が長くなりがちなのでページを分けての解説になっています。記事を上手く作成出来る方だともう少しコンパクトにまとめられるのではと反省しながら見やすく伝わりやすい記事とはを良く考え今後に活かしたいと考えています。

Drupalの記事

関連するDrupalでWEBサイトを構築する為の環境構築の記事やDrupalについて書いた記事になります。

記事は全てナンバリングしています。Drupalを初めて使う為の準備から始まる最初の記事から読む事もできます。

Word Pressの記事

Drupalの機能を客観的に評価する際、Word Pressとの比較がわかりやすいので、Word Pressの記事も書いて行きます。Word Pressは非常に優れたCMSで、わかりやすい構造から初めてセルメイドのBlogをしたい方などにおすすめです。
  • Drupal記事まとめ
  • WordPress

Drupal記事

Drupalについて記事を書いています。このWEBサイトを構築していく上でのトピックになります。プログラミングやソースコードなどエンジニア的な記事ではなく、プログラミング経験がない個人がDrupalでパーソナルなWEBサイトを構築するという観点での記事になります。
  • Drupal記事まとめ

最新の記事

Drupalについて書いた最新の記事になります。

#D35 Thanks for technical advice.

当サイトをご覧いただいた方から、リダイレクトエラーについての技術的なアドバイスをいただきました。わかりやすい解説をいただき、エラーの解決ができましたので記事にしています。
  • 雑感
  • Drupalの記事

#D34 Colour Generator Problem

Drupal10.4.xに更新以降、Civic Themeのカラージェネレーターが効かなくなりデフォルトの配色での公開となっていましたが修正パッチが配布されていたので試してみました。
  • Civic Theme
  • Drupalの記事

#D33 Drupal ドキュメントルートの設定

Xserverビジネススタンダードにはドキュメントルートの簡易設定しかないのでDrupalのプライマリードメインの設定は.htaccessの設定をする必要があります。
  • 環境構築
  • Drupalの記事

#D32 Drupal 10.4.0

Drupal Coreが10.3xから10.4xにアップデートされましたので当サイトも早速アップデートします。
  • Civic Theme
  • Drupalの記事

Life Styleの記事

Drupalとは関係ないのですがLife Styleの記事も書いていますのでよろしければ購読ください。

Life Style記事

ライフスタイルの記事になります。Drupalに触れる目的でこのWEBサイトを立ち上げています。元はWord Pressで作成した記事をこちらのWEBサイトに再構築しています。Word Pressも学習目的で利用したのですが記事をしっかり作る事を目的としていたので、テーマに興味があればそれなりに楽しめると思います。
  • Life Style記事まとめ
  • Drupalの記事
  • WordPress