ITエンジニア/デザイナ向けにオープンソースを毎日紹介

プレゼンテーションというとPowerPointやKeynoteで作ることが多いですが、HTMLでのプレゼンテーションも使われるようになっています。しかし表現力があまり高くなく、シンプルなスライドが多かったように思います。

そこで使ってみたいのがWebSlidesです。これまでにないほど表現力の高いHTMLスライドが作れるフレームワークです。

WebSlidesの使い方

例えばこんな表示。大きな画像を背景に当てています。

クラスも多数用意されています。

2つのカラムでの表現。ソースコードをハイライトできます。

上下左右、どこでも自由に記述できます。

左寄せ。

3カラムでのグリッド表示。

地図表示の例。

ナビゲーション。

Apple風のクラスが用意されています。

なんとなくそれっぽいですよね。

こんな表示も。HTMLならではですね。

Webサイトにも使えそうなデザインです。

表現という意味においてはスライドもWebサイトも変わりません。

プライスリスト。

個人のポートフォリオにも。

WebSlidesはHTMLのスライドはもちろん、ページ単位でコンテンツが変わるタイプのWebサイトにも利用できます。SPAで使ってみても面白いでしょう。縦長が当たり前になっている中だからこそ、プレゼンテーション風のWebサイトは目を引きそうです。

WebSlidesはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

WebSlides: Create Beautiful HTML Presentations

webslides/WebSlides: Create HTML presentations in seconds —

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2