Tsutomu Kamimori のすべての投稿

都内ウェブサービス屋デザイン部ゼネラルマネージャー。チームマネジメントを中心に、時々執筆したり講演をしたり、競技委員[謎]をしたりしています。オバフォー男子。好きなものは、MacとiPhone、ケータイを含むガジェット全般、平成仮面ライダーシリーズ、平成スーパー戦隊シリーズにプ○キュアシリーズw、その他幅広く・・・。

JimdoのTOKYOレイアウトでサブナビゲーションのバーを表示させ続ける方法

JimdoのTOKYOレイアウトがリリースされましたね!待ちに待った方、多いのではないでしょうか?

先日、WordPressで作っていた個人サイト(T-STUDIO.COM)をJimdo Businessに移行したので、早速TOKYOレイアウトにしてみました。この新しいTOKYOレイアウトは、Jimdoエキスパートでもある、服部制作室の服部さんがデザインされました。日本語が美しく見えるようにつくられたレイアウトです。 続きを読む JimdoのTOKYOレイアウトでサブナビゲーションのバーを表示させ続ける方法

Jimdoのレイアウトをカスタマイズしてオリジナルデザインにする方法

昨年夏に刷新されたJimdoのレイアウトは、そのまま使ってもきれいなサイトを作ることができますが、オリジナリティのあるデザインにしたい、そういうニーズも少なからずやあるかと思います。

先日、私が管理しているECサイトのキャンペーンサイトを急遽作ることになったのですが、更新性などを考えて誰でも扱えるようにしたほうが、私が不在の時でもスタッフが更新や新規ページの作成を行えると思い、Jimdoを選択しました。

ただし、ブランドイメージを損ないたくなく、現在運用中のECサイトのデザインを取り込めないモノか考えました。そこで考えたのが、Jimdoのレイアウトのスタイルを上書きする形をとって、運用中のECサイトのデザインに近づけることができないか?ということでした。 続きを読む Jimdoのレイアウトをカスタマイズしてオリジナルデザインにする方法

モンハン私的名曲セレクト

MH4G発売から2ヶ月。とっととウカムを撃破してG級にあがって、古文書解放してLv.140のクシャルギルクエとバサル亜&ラーをまわしながら祭囃子とギルドナイトセーバー集めをしております(笑)

今回のモンハンAdvent Calendar は好きなBGMベスト3を挙げてみたいと思います。モンハンのBGMって結構神曲が多いんですよねぇ。語りだすと止まらないので、早速という感じですが、随時更新します!まずは、 続きを読む モンハン私的名曲セレクト

アクセシビリティについて考える日

今日は、Advent Calendarのアクセシビリティ担当の日。昨年は、

CSS NITE IN SHIZUOKA , VOL.3 -アクセシビリティ・ミーティング- から1年半経って

こんな記事を書きました。そして、同じくJimdoのAdvent Calendarでは、

お客さまの顔がみえますか?

という記事で、Jimdoのお客さま向けにアクセシビリティについて書きました。
そんな今年、何を書こうかとずっと悶々としていたのですが、この機会になんでそもそもアクセシビリティに向き合うようになったのかを思い出して書いてみようかと。 続きを読む アクセシビリティについて考える日

プリキュア私的名曲セレクト

プリキュアの新シリーズが始まるとまずは変身シーンのBGMが気になるんですよね。
あと、回を重ねて少し核心に迫りそうな話になる頃にかかる重めのBGM。この辺りは、どのプリキュアも神な楽曲が多いですよね。

今回、初のプリキュアAdvent Calendar 参加ということで、このブログでも初ののプリキュアネタは、そんな好きなBGMベスト3を挙げてみたいと思います。ちなみに、ストーリーにかなり言及しているので、これから見ようと思っている方は読まれない方がよいかも知れませんが、まずは、 続きを読む プリキュア私的名曲セレクト

JimdoのNewレイアウト、サイドバー有り無しの内訳紹介

Adventar.orgのJimdo Adventカレンダー向けに何かをと言うことでしたが、初回と言うことで、軽い記事にしました。Newレイアウト周りで覚えておくと良いレイアウトにまつわるネタということで、レイアウト名からシングルカラムなのか2カラムなのかをまとめました。先日追加された、HavanaとLima対応です。 続きを読む JimdoのNewレイアウト、サイドバー有り無しの内訳紹介

JimdoのNewレイアウトで3段カラムのレイアウトを作ってみる

8月に新しくなったJimdo。新しいユーザーインターフェースに加えて、これまでのテンプレートが刷新され、Newレイアウトとして利用できるようになりました。

このNewレイアウトの特徴は主に次の通り。

  1. レイアウトの名称がこれまでのナンバー表記から、世界の都市の名前になった
  2. レイアウトパターンは大きく分けてシングルカラムと2段カラムの2種類になった
  3. 背景画像を活かすデザインレイアウトになった
  4. 従来のテンプレートにあったヘッダーが無くなった(代わりに背景画像で活用)

細かいところを挙げるとキリがないのですが、わかりやすいところではこのあたりかなと思います。

さて、そんなNewレイアウトなのですが、2番のレイアウトパターンについて今日は注目してみたいと思います。
JimdoのNewレイアウトでは、ページレイアウトの基本としてシングルカラムのものとメインコンテンツエリア+サイドバー(サブメニュー含む)の2段カラムのものと大きく二つのレイアウトに分かれます。

シングルカラムは、横幅いっぱいに広がったコンテンツエリアでサイドバー的なものが無いレイアウトです。わかりやすい例が、Appleのサイト。横幅いっぱいにコンテンツがあり、昔ながらのサイドバー的な部分がありません。コンテンツエリア内に幾つか等間隔に分かれたコンテンツがあるものの、サイドバーでは無くあくまでもコンテンツとして扱われています。

かたや2段カラムのレイアウト。左ないし右に狭小のエリアがあり、並ぶようにメインコンテンツがあるレイアウト。いわゆる昔ながらのレイアウトパターンですね。今でも多くのサイトにはサイドバーと呼ばれている狭小エリアがあります。この狭小のエリア(以下サイドバー)には、下の階層のメニューがあったり、バナーがあったり、メニューでは無いけれど特筆した情報を載せたりといった、限られた画面の中で多くの情報を載せるために考えられたレイアウト。

どちらのレイアウトが良いのか悪いのかというのはここではさておき、先日こちらの本の監修をさせていただいた際に、打ち合わせの席で3段カラムって無いの?という問いをいただきました。3段カラムといえば、ポータルサイトによくある真ん中にメインコンテンツのエリアが有り、左右に狭小のサイドバーがあるレイアウトパターン。JimdoのNewレイアウトでは、この3段カラムのレイアウトパターンは用意されていないので、レイアウト選択で選べるものはありません。ただ、実際には3段カラムへの要望はあるようで、実際にそういう問い合わせもきています。

そんなNewレイアウトで3段カラムがどうしても使いたい!という方向けのちょっとしたTipsをここでご紹介しようと思います。前置きが大変長くなりました。

ホーム   test 3col ページ!

ページ自体は、書籍用に作ったダミーのサイトなので実際にこのようなポータルサイトは無いのですが、メインメニュー、メインビジュアル、ページタイトルとあって、その下が左右に狭小のサイドバーがあり真ん中にメインコンテンツといういわゆる3段カラムになっているレイアウトです。Newレイアウトで遂に3段カラムが!と思ったかたは、残念、違います。

実際にどんなレイアウトになっているのか、編集モードに切り替えてご紹介します。

まずはこのレイアウト、何を使っているのか?と聞かれれば、

スクリーンショット 2014-11-06 13.01.04

Shanghaiを使っています。
え?Shanghaiってシングルカラムだよね?と速攻で答えられるかたは、すばらしい!Jimdoファンの鏡です!
お!これは!?と思ったかたは鋭いっ!(謎)。これ、既存のシングルレイアウトであるShanghaiをベースにして、擬似的に3段カラムしたサンプルサイトです。

Shanghaiのレイアウトはとてもシンプルで、ページ最上部にメインメニューがあり、その下にメインビジュアルのエリア、ページタイトルのエリアと続きます。ここまでレイアウトの基本構造でプリセットされています。ポイントはその下からです。ここは基本的に自由にコンテンツを入れていくことが出来るのですが、そこに次の図の様にカラムを入れていて、3段にしているというたったこれだけのことです。

スクリーンショット 2014-11-06 14.25.08

カラムをコンテンツの追加で挿入したら、標準では2段のカラムが挿入されます。

スクリーンショット 2014-11-06 14.34.11 カラムをクリックします。

スクリーンショット 2014-11-06 14.34.27カラムが挿入されます。初期は2つのカラムです。

スクリーンショット 2014-11-06 14.34.42マウスを動かすとカラムを編集という画面に変わるので、クリックしてみましょう。

スクリーンショット 2014-11-06 14.34.56カラムの編集が出来るようになります。カラムの左右真ん中に「+」アイコンがあります。これをクリックするとカラムを追加することが出来ます。もしカラムを削除したい場合は、それぞれのカラムの下にあるゴミ箱アイコンをクリックします。

スクリーンショット 2014-11-06 14.35.10「+」アイコンをクリックしたので3カラムになりました。このままでは、3つのカラムが等間隔のサイズなので、真ん中のカラムを少し大きくします。各カラムの間にあるバー、画面では真ん中のカラムの左右に出ている薄いグレーのバーにマウスを載せて左右にドラッグすることでカラムの大きさを変更することが出来ます。

スクリーンショット 2014-11-06 14.36.35左右のバーをドラッグして調整したのがこの図。だいたい左右どちらのサイズも約20%にしました。

あとは、このカラムに必要なコンテンツを入れていくだけ。
ヤフーやその他ポータルサイトなどにあるような3段カラムのレイアウトをカラム機能を使って作れるようになりました。

ホーム   test 3col ページ!

JimdoのNewレイアウトは、そのまま使っていただいても素敵なサイトをすぐ作ることが出来ますが、こうしたちょっとした工夫をうすることで、さらに自分好みのサイトに仕上げていくことが出来ます。

さて、次回ですが(勝手に続き物にしてるw)、レイアウト内に配置するメインビジュアルについて、幾つかのレイアウトパターンに沿って画像のサイズや設定方法について紹介したいと思います。

いつになるかはわかりませんので気長にお待ちくださいね<(_ _)>

最後に

記事で少しご紹介した本ですが、小学館から出ているムック本です。完全New UI、New レイアウト対応で、この本ではNew レイアウトの「St.Petersburg」をベースに解説しています。お知り合いなどではじめてJimdoを使ってサイトを作りたいというかたがいらっしゃいましたら、是非ご紹介ください。

15分×7日間 無料でできる はじめてのホームページらくらく作成ガイド
Amazonではこちらから買えます

また、同じ時期にJimdo Expertの赤間さんが書籍を出版されましたので、ご紹介。

10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック
Amazonではこちらから買えます

10月25日に開催されたJimdo 5周年記念イベントでも販売したのですが、大人気で即完売してしまった人気書籍です。Jimdoを使い始めてもっとこうしたい、カッコイイページをつくりたい、そんなかたがいらっしゃいましたら、コチラを超・超オススメします。

ということで、突然始まったJimdoカスタマイズコーナーの第一回目はこれで終了です。

それでは!



WebSig会議 Vol.34でcorabbitのLTをしました

先日のWebSig会議 vol.34の懇親会で、corabbitのLTをしました。急遽参加させていただくこともあり、手元の資料をLT用にかなり強引にまとめてのプレゼンでしたが、終わった後に反応をいただき、ありがとうございました。

まだまだかゆいところに手が届いていないところもありますが、ペースを上げて改良しておりますので、これからも、そして初めてのかたも、corabbitをどうぞよろしくお願いいたします。

馮 富久さん撮影

コラボレーションを簡単に | corabbit

JimdoCafeの店員になったお話

先月の話ですが、渋谷ヒカリエで、みんビズセミナーが行われました。ほぼ満席の状態で、あらためてお越しいただいたお客さまには、長い時間お疲れさまでしたとお伝えしたいと思います。
セミナーは、講師の皆さんによる、みんビズ・Jimdoの活用について非常に為になるお話をたくさん聞くことができたかと思います。そのセミナーの最後のセッションがJimdoCafeというコーナーで、講師の皆さんやJimdoJapanのスタッフによる、相談コーナーを用意しました。 続きを読む JimdoCafeの店員になったお話

CSS Nite in SHIZUOKA , Vol.3 -アクセシビリティ・ミーティング- から1年半経って

勢い余ってAdvent Calendarの Web Accessibilityに参加表明してしまったものの、これまでの方の記事があまりにもすごすぎて、正直やめようかと思いましたが、企業に勤めて、自社サイトの責任者になったことで、ウェブアクセシビリティへの意識はこれまで以上に高まったわけで、やっぱり書こうかなと、まぁまとまりがないのですが、書くことにしました。内容は、昨年静岡で行われたCSS Nite in SHIZUOKA , Vol.3の後書き的な内容を1年半の今、書いてみます。 続きを読む CSS Nite in SHIZUOKA , Vol.3 -アクセシビリティ・ミーティング- から1年半経って