ありそうでなかった新サービス。
自分だけのお気に入りの環境で作業効率をアップ!

ツールに頼らずSassが使える
コンパイルサーバー

無料登録

デモページ

デモサイト管理画面

他社サービスとの違い

logo_type
一般的なレンタルサーバー
ワードプレスWordPress
一般的な無料ブログ
必要スキル
HTML+CSS
HTML+CSS
HTML+CSS,
PHP, MySQL
(難しい)
不要
まるごと
バックアップ
FTPを使ってHTMLなどの全ファイルをまるごとダウンロードできます
FTPを使ってHTMLなどの全ファイルをまるごとダウンロードできます
HTMLとしてバックアップできず、WordPressにしかリストアできない
FTP未対応
Sass自動
コンパイル
ベンダープリフィックスの付与やミニファイなどが全自動
不可
不可
不可
HTML
テンプレート機能
自由自在
不可
自由自在
一定範囲で可
デザイン改変時のプレビュー機能
テスト用URLあり
不可
不可
プレビュー機能あり
独自ドメイン+常時SSL
常時SSLにも対応
対応まちまち
サーバー設定次第
有料オプション
独自ドメイン
メール
送受信できます
対応まちまち
不可
不可
無料利用
無料プランでも
広告なし
有料
有料
無料だけど
広告あり
主な用途
小〜中規模サイト
個人サイト

中〜大規模サイト

大規模サイト
ブロガー向け

個人サイト

Serviceイイウェブでできること

Sass
Sassソースコードを置くだけでOK
出力と同時に自動でコンパイル!
HTMLを結合して出力
HTMLを結合して出力ヘッダやフッタなど各ページの共通部分をファイルにして、他のHTMLから読み込むことができます。
FTPが使える
FTPが使えるお気に入りのエディタで編集、バックアップも思いのままにできます。
URLが2個
URLが2個まずは下書き用のURLで確認してから、ボタンひとつで本番環境へ一般公開できます。
送信フォームが作れる
送信フォームが作れるプログラムの知識がなくても、formタグだけでお問い合わせフォームなどが作れます。
テンプレート変数
テンプレート変数自分で作ったテンプレート変数の値を各ページごとに決めることができます。
自動ミニファイ
自動ミニファイ出力時に自動で無駄な改行を取り払ったり、ベンダープリフィクスを自動付与できます。ソースマップにも対応
SSL
独自SSLイイウェブで設定されている独自ドメインに対して無料で独自SSLを利用することが可能です。

and more...

機能一覧はこちら

Sassサースを自動コンパイル

SassとはCSSの新しい記述方法で近年のウェブの潮流のひとつとされる技術のひとつです。
CSSの弱点をカバーしていて、従来と比較してより効率的に記述することを目的に開発されています。
例えばこちらは入れ子を使った例です。

Sassの記法
#index a {
	color: blue;
	&:hover {
		color: red;
	}
}
従来のCSS
#index a {
	color: blue;
}
#index a:hover {
	color: red;
}

こちらは変数を使った例です。
変数が使えればサイト全体の配色を簡単に変更できます。
これらはSassの便利な記法のごく一部にすぎません。

コンパイル前(Sass)
$mainColor: #00f;
$spacePx: 6px;
#index {
	background: $mainColor;
	margin: $spacePx - 2px;
}
コンパイル後(CSS)
#index a {
	background: #00f;
	margin: 4px;
}

通常Sassはウェブデザイナーが自分のPCでコンパイルしてCSSに変換する必要がありますが、イイウェブではSassのソースコードを配置しておくだけで、
出力時に自動的にコンパイルされて出力されます。
ウェブデザイナーが自分のPCにコンパイル環境を整える必要はありません。

ベンダープレフィックスを自動付与

イイウェブではベンダープレフィックスに悩まされることはありません。
Sassのコンパイルと同様に、CSSの出力時に自動でベンダープレフィックスが付与されるからです。
ウェブデザイナーは1つだけ記述しておくだけです。

コンパイル前
#example {
	border-radius: 8px;
}
コンパイル後
#example {
	-webkit-border-radius: 8px;
	   -moz-border-radius: 8px;
	    -ms-border-radius: 8px;
	        border-radius: 8px;
}
CSSが1つにまとまる

イイウェブでは複数のCSSファイルをひとつにまとめて出力できます。
ファイルの結合処理も出力時に自動で行われるので、特別な操作は必要ありません。

コンパイル前
html {
	font-size: 16px;
	overflow-y: scroll;
}
@import "/_body.scss";
別ファイル _body.scss
body {
	margin: 0;
	text-size-adjust: 100%;
}
コンパイル後
html {
	font-size: 16px;
	overflow-y: scroll;
}
body {
	margin: 0;
	text-size-adjust: 100%;
}

上記の例は敢えて@import構文を使っていますが、ひとつひとつ指定しなくても「ディレクトリ内のCSSをすべて結合させる」こともできます。
さらにソースマップが利用できるため、複数のファイルが1つに結合されていても、エラーの原因が「どのファイルの何行目なのか」を、ブラウザの開発者ツールを通してすぐに見つけることができます。

コンパイル前
#example {
	display: block;
}
コンパイル後
#example {
	display: block;
}
/*# sourceMappingURL=data:application/json;base64,...
テンプレート機能が使える

イイウェブではウェブページの共通部分を別ファイルに記述しておいて、出力時にインポートすることができます。
こちらのようにウェブページ内の共通パートをそれぞれ別ファイル化しておけば、大規模なサイトでも効率的に管理できます。

コンパイル前
@import "_header.html";

<article>
	主コンテンツ
</article>
別ファイル _header.html
<header>
	共通ヘッダー
</header>
コンパイル後
<header>
	共通ヘッダー
</header>

<article>
	主コンテンツ
</article>

また上記の@importとは逆の意の@export構文を使うと、出力時に別のファイルに「読み込ませる」こともできます。

コンパイル前
@export "_base.html";

<article>
	主コンテンツ
</article>
別ファイル _base.html
<!DOCTYPE html>
<html>
	<head>...</head>
	<body>
		@import *;
	</body>
<html>
コンパイル後
<!DOCTYPE html>
<html>
	<head>...</head>
	<body>
<article>
	主コンテンツ
</article>
	</body>
<html>

@import構文と@export構文は重ねて使うことができるので、例えば「AとBを読み込んだものを、Cに読み込ませて、更にDに読み込ませてから出力する」といったこともできます。一般的なテンプレート機能にありがちな制約はなく、自由自在にウェブサイトを設計することができます。

テンプレート変数が使える

イイウェブではあらかじめ設定しておいたテンプレート変数を出力時にHTMLテンプレートに展開することができます。

コンパイル前
<title>{user/title}</title>
コンパイル後
<title>マイサイト</title>

テンプレート変数の値はページごとに別の値を指定できます。
こちらはページごとに異なるタイトルを表示する例です。

コンパイル前
<title>{user/title}</title>
コンパイル後 index.html
<title>マイサイト</title>
コンパイル後 news.html
<title>最新記事</title>

テンプレート変数は好きなだけ追加と削除ができて、さらに応用を利かせて「ページAとBで表示されるけど、ページCでは表示されないメニュー」といった条件分岐を行うこともできます。詳細はテンプレ変数の管理ページの下部の説明をご覧ください。

ミニファイが自動で行われる

イイウェブではHTMLの改行コードや空白、コメント領域などを出力時に自動で除去することができます。
データ量の減少によるページの表示の高速化が期待できます。

コンパイル前
<html>
	<head>
	</head>
	<body>
	</body>
<html>
コンパイル後
<html><head></head><body></body><html>
コンパイル前
/* comment ... */
#example {
	padding: 8px;
	display: block;
}
コンパイル後
#example{padding:8px;display:block}

CSSも同様に自動でミニファイが行われます。
オプション次第では各プロパティの順番を規則的に並び替えることもできます。
また離れた場所に書かれたメディアクエリ@mediaもひとつにまとめられます。

コンパイル前
!function()
{
	// comment ...
	var helloWorld = 'Hello World!';
	console.log(helloWorld);
}();
コンパイル後
!function(){var a='Hello World!';console.log(a);}();

JavaScriptについてはミニファイされるだけでなく、変数名の置き換えによって難読化も行われます。

テスト環境がある

イイウェブでは「プロダクション環境(本番環境)」と「テスト環境」が別々のURLで提供されるので、
変更内容に問題がないことをテスト環境で確認してから、プロダクション環境に適用することができます。

テスト環境
https://(WebsiteID).iiweb.space/
プロダクション環境
https://(UserDomain.com)/

プロダクション環境への適用(デプロイ)は管理ページにてボタンひとつで行えるので、事前に作っておいた内容を、新しいリリースの発表当日にスマホからデプロイするといった芸当も可能です。

また前述のCSSのソースマップはテスト環境でだけ有効にできるので、プロダクション環境にCSSのソースマップが表示されてしまうことも防ぐことができます。

さっそくイイウェブを試してみる

メールアドレスとパスワード設定のみで
1分でご利用できます。

利用規約に同意する

すでにアカウントを持っている方はこちらから