- 更新日: 2020年7月28日
- 公開日: 2020年7月21日
【Web系必見⚡】オンラインエディタ『Glitch』を体感しよう！
Glitch というフリーのオンラインエディタをご存知でしょうか？
コードスニペットで CodePen は見た、体験したことがあるという方も多いと思われます。
Glitchは、 CodePen 以上の体験をあなたに与えてくれるかもしれません。
また Glitch の Webページが超キュート❤️で素敵すぎましたので、ユニークなデザインポイントをいくつかコード付で解説いたします。
Glitch公式ページ： https://glitch.com/
Glitchがおもしろい＆GlitchのWebサイトがおもしろい
Glitch とは
Glitch で公開されているポケモン？の Web VR （JavaScript） （リンク）
Glitch、日本語に訳すと「欠陥」 という意味ですが、そんな意味はどうでもよく Web 系に関係する人、プログラミングに興味がある人にとっては強力なウェポン。
自分のパソコンにプログラムを編集する環境がなくても、ブラウザ上でコードを編集でき、保存も公開も可能。 どれだけ Glitch が凄いかは Web ページにアクセスしてみると分かりますが、まずは主だった特徴を紹介。
- 無料可
- 無料でもサブドメインで自分の Web ページを公開できる
- 他人のコードを Remix できる
- 無知でも React や Vue.js 、 AngularJS を動かせる
- データベースも利用可能（SQLite）
- 画像などのファイルもアップロードできる
- 遅くない
- 変更内容は LIVE で反映
- React の凄さを感じます（Glitchは Reactベース）
何よりも嬉しい「無料利用枠」。通常 ”無料” というと制限が厳しいイメージがありますが、 Glitch の場合はそうでもありません。
上図は Glitch 無料プランのスペック内容ですが、サンプルプログラムを動かすには十分な性能。同類サービスに CodePen がありますが、 CodePen の場合はブラウザメモリーが関係するため、使用できるコード量やメモリー（Limit 1MB）が限定的。つまり Glitch は無料枠でも十分 Web デザインを楽しめるということ。
そして自分の作った、管理する Webページは”無料”でネット上に公開できます。 〇〇.glitch.me という Glitch のサブドメインが割り当てられて、 SNS で拡散したり、ポートフォリオサイトとしても利用できるでしょう。「ちょっとコードを残しておきたい」「ちょっとサンプルを紹介したい」といった時に非常に便利ですね。
「他人のコードを Remix できる」、こちらは Scratch に似たイメージで、 Glitch で作ったプログラムを公開している人もたくさんいます。その公開しているプログラムを自分のアカウントに引用でき、ベースコードを元に編集可能。
例えば上図は Node.js のグラフ・ライブラリー D3.js を使った様子で、私は初めて D3.js をプログラミング編集なしで動かしてしまいました。 通常 D3.js を使おうと思うと、公式ドキュメントを読んだり YouTube をみたり、コードを描いてみたり、と時間と労力が必要です。しかし、 Glitch の世界は別。 「Remix」ボタンと「Preview」ボタンで未体験の JavaScript ライブラリーもノーストレスで動かせてしまいます。つまり”無知”でも本格的な JavaScript の世界を楽しめる、ということ。
この他にも JavaScript ならではのブラウザ VR や React、 Vue.js なども初期学習なしで実行可能。これは Glitch 最高経営責任者のアニルダッシュさんのコメント
「グリッチは皆のためです」
「うまくいくものから始めましょう」
「コーディングは創造的で表現力豊か」
引用： Medium／ Glitch
のまさにそれっ、といった感じ。私自信、 React 興味あるなと思っていた程度ですが、一気に React をもっと使ってみたくなりました。またその延長線上にある React 搭載型の PHPフレームワークの Laravel も。
あとは上記に紹介した特徴以外に、 GitHub と連携できる、有料プランにするとメモリーを 2GB にアップできる、オリジナルドメインも 2回の感謝で OK など本当に Web プログラミングが楽しくなる環境が揃っています、ワクワクしますね。
GlitchのWebデザイン
Glitch を利用してみると分かるのですが、Webデザインが無茶苦茶リッチです。静的なマテリアルも素敵ですし、実際にパソコンで Glitch を操作してくと、いろいろなところで「おっ？！」と思うところがあります。
例えば、コードをリミックスして編集しようとした時に出てくるポップアップ。
Glitch でプログラムを編集する際に登場してくるポップアップ
これは Glitch コミュニティーも利用できますよ、という案内。そのほかにもボタンをクリックしたらボタンの枠線が増えたり、自動でカラーが変わったり。おこがましくない程度にいい感じにユーザーに刺激を与え、ついつい使いたくなってしまうデザイン、本当にこれは Web に関係する人みんなが勉強になると思いました。
自分のプロジェクトページにアクセスすると表示されるローディングアイコン、お洒落です。読み込み途中にパソコンの通信を切ってみると分かるのですが、このアニメーションは CSSアニメ で制御。ローディングアイコンを使用されている方は、真似したくなりますよね。
GlitchのWebデザインをGlitchでマネしてみよう
斜め右肩上がりの見出しデザイン
Glitch 公式ページの多くのところで採用されている見出しタグのナナメ・デザイン。”右肩上がり”って、なんとなく「ポジティブ」「前向き」「右肩業績上がり」的なイメージで Good ですよね。
こうしたチョット変わった Web デザインを採用する際、「画像で読み込む」場合と Glitch のように 「CSSで制御」する場合の ２パターン。 画像で読み込んでしまえば簡単そうですが、「全体の見出しタグの角度を少し変えたい」「色を変えたい」といった時にもう一度画像を作り直す必要があります。しかし、 Glitch のように CSS で制御できれば「角度」も「色」も「大きさ」もあとで簡単に変更することができますし、スマホデザインにも柔軟に対応可能。
そして斜め右肩上がりの見出しデザインのコードは以下の通り。
【 HTML 】
<h2>
<span class="outer">
<span class="inner">JavaScript インパクト！</span>
</span>
</h2>
【 CSS 】
.outer {
display: inline-block;
transform: rotate(-1deg);
position: relative;
left: calc(5px * -1);;
z-index: 0;
background-color: pink;
padding: 5px calc(5px * 2);
border-radius: 5px;
}
.inner {
position: relative;
display: inline-block;
transform: rotate(1deg);
}
この斜め右肩上がりの見出しデザイン、 span タグを ２重に使うことで表現。最初の span で斜め右肩上がりのピンク色背景を用意して、その後に角度を元に戻して文字を表示するように制御。
基本的な CSS スキルに ”角度” を加えるだけで、お洒落に見えますよね。
フレーム付きのグリッドデザイン
チョット私の顔が気持ち悪いかもしれませんが、 Glitch で使用されている Grid デザインをマネしてみました。通常は区切ったコンテンツの中をどうしようか？と考えるところですが、 Glitch は ”中” も ”外” もお洒落に演出。
一見するとシンプルなデザインで簡単そうにも思えますが、 CSS コードを確認すると以下のようにチョット複雑。
【 CSS の 一部抜粋コード】
.styles__postcards___3GxG5 {
display: grid;
grid-gap: 30px;
grid-template-columns: 1fr 1fr 1fr;
}
.styles__postcard___32wNV {
position: relative;
border: 4px solid var(--outer-border-color);
border-radius: 5px;
background: var(--inner-border-color);
padding: 7px;
overflow: hidden;
}
.styles__waves___oO6bZ {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: url("https://cdn.glitch.com/179ed565-619c-4f66-b3a3-35011d202379%2Fwave.svg");
background-position: 0 -1px;
opacity: .65;
}
.styles__postcardContent___Afk_c {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
background: #fff;
border-radius: 5px;
padding: 20px 10px 15px 10px;
}
.styles__stamp___3XrcE {
position: absolute;
top: 8px;
right: 10px;
height: 35px;
}
CSS 一部表示 終わり
CSS のクラス名を最適化していない点、ご了承ください。
今コードを見る（HTML、102行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello!</title>
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/one.css">
<script src="/script.js" defer></script>
</head>
<body>
<h1>Glitch Web Page のデザイン学習</h1>
<p>元 <a href="https://glitch.com/">https://glitch.com/</a></p>
<p>対象： PC</p>
<div class="styles__postcards___3GxG5">
<!-- 左ブロックはじめ -->
<div class="styles__postcard___32wNV" style="--inner-border-color:#EAE6FF; --outer-border-color:#7460E1;">
<div class="styles__waves___oO6bZ" aria-hidden="true"></div>
<div class="styles__postcardContent___Afk_c">
<div class="styles__stamp___3XrcE">
<h2 class="heading__heading___3bBL2 heading__h2___7wo6b">
<!-- <img alt="Update" class="styles__stampLabel___vDert" sizes="" src="https://cdn.glitch.com/179ed565-619c-4f66-b3a3-35011d202379%2Fpostcard-label-update.svg" loading="auto" width="auto" height="100%"> -->
<!-- <img data-module="Icon" src="https://cdn.glitch.com/e7e23ba6-c0ec-4a5a-8dcf-b6f61984cea8%2Fdog_face.png?v=1568142112319" alt="" class="icon__IconBase-sc-14abeh1-0 cGovEN styles__stampIcon___2aurJ"></h2> -->
</div>
<div class="styles__postcardColumns___1_OKh">
<div class="styles__postcardContentColumn___2Ox5h">
<h3 class="styles__postcardSubheading___T9R1u heading__heading___3bBL2 heading__h3___3zu_K">Glitchデザインはすごい</h3>
<p style="--size:15px; --weight:400;" class="text__p___3RiQJ text__defaultMargin___2lvr- styles__postcardText___1OR8X">みんなで Glitch 使ってみよう！</p>
<span class="styles__postcardCta___2n14_">
<button data-module="Button" class="button__BaseButton-sc-10b15g-0 gRwhkR button__StyledButton-sc-10b15g-1 button__Button-sc-10b15g-3 jnvevu" type="button">All Updates <svg viewBox="0 0 64 64" aria-hidden="true" class="icon__SVGBase-sc-14abeh1-1 bOzyky">
<polygon points="64,32 48,48 48,36 0,36 0,28 48,28 48,16" transform="translate(32,32) rotate(0) translate(-32,-32)" fill="currentColor"></polygon></svg>
</button>
</span>
</div>
<div class="styles__postcardThumbnailColumn___2V9qg">
<img alt="" sizes="" src="https://pythonchannel.com/static/images/twitter_search_app/17.jpg" loading="auto" width="100%" height="100%">
</div>
</div>
</div>
</div>
<!-- 左ブロック終わり -->
<div class="styles__postcard___32wNV" style="--inner-border-color:#FEED64; --outer-border-color:#E1D262;">
<div class="styles__waves___oO6bZ" aria-hidden="true"></div>
<div class="styles__postcardContent___Afk_c">
<div class="styles__stamp___3XrcE">
<h2 class="heading__heading___3bBL2 heading__h2___7wo6b">
<!-- <img alt="Video" class="styles__stampLabel___vDert" sizes="" src="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2Fpostcard-podcast.svg" loading="auto" width="auto" height="100%"> -->
<!-- <img data-module="Icon" src="https://cdn.glitch.com/652d1806-f6c1-4fa5-82e8-d5aa0e605a64%2Ftelevision.png?v=1568928956732" alt="" class="icon__IconBase-sc-14abeh1-0 cGovEN styles__stampIcon___2aurJ"> -->
</h2>
</div>
<div class="styles__postcardColumns___1_OKh">
<div class="styles__postcardContentColumn___2Ox5h">
<h3 class="styles__postcardSubheading___T9R1u heading__heading___3bBL2 heading__h3___3zu_K">コードの変更はリアルタイムで更新だ</h3>
<p style="--size:15px; --weight:400;" class="text__p___3RiQJ text__defaultMargin___2lvr- styles__postcardText___1OR8X">この React の技術ってほんとすごいね</p>
<span class="styles__postcardCta___2n14_">
<a href="https://glitch.com/glimmer/episode/ssf-001-game-on" variant="secondary" data-module="Button" class="button__StyledButton-sc-10b15g-1 button__Button-sc-10b15g-3 jnvevu">Watch It
<svg viewBox="0 0 64 64" aria-hidden="true" class="icon__SVGBase-sc-14abeh1-1 bOzyky"><polygon points="64,32 48,48 48,36 0,36 0,28 48,28 48,16" transform="translate(32,32) rotate(0) translate(-32,-32)" fill="currentColor"></polygon></svg>
</a>
</span>
</div>
<div class="styles__postcardThumbnailColumn___2V9qg">
<img alt="" sizes="" src="https://pythonchannel.com/static/images/twitter_search_app/17.jpg" loading="auto" width="100%" height="100%">
</div>
</div>
</div>
</div>
<div class="styles__postcard___32wNV" style="--inner-border-color:#cdeffc; --outer-border-color:#75d1f8;">
<div class="styles__waves___oO6bZ" aria-hidden="true"></div>
<div class="styles__postcardContent___Afk_c">
<div class="styles__stamp___3XrcE">
<h2 class="heading__heading___3bBL2 heading__h2___7wo6b">
<!-- <img alt="Ideas" class="styles__stampLabel___vDert" sizes="" src="https://cdn.glitch.com/0aa2fffe-82eb-4b72-a5e9-444d4b7ce805%2Fideas-label.svg?v=1573670255817" loading="auto" width="auto" height="100%"> -->
<!-- <img data-module="Icon" src="https://cdn.glitch.com/d7f4f279-e13b-4330-8422-00b2d9211424%2Flightbulb.png?v=1575320161677" alt="" class="icon__IconBase-sc-14abeh1-0 cGovEN styles__stampIcon___2aurJ"> -->
</h2>
</div>
<div class="styles__postcardColumns___1_OKh">
<div class="styles__postcardContentColumn___2Ox5h">
<h3 class="styles__postcardSubheading___T9R1u heading__heading___3bBL2 heading__h3___3zu_K">Scratchっぽいところもあるね</h3>
<p style="--size:15px; --weight:400;" class="text__p___3RiQJ text__defaultMargin___2lvr- styles__postcardText___1OR8X">マップ制御できる Leaflet.js もすごいね</p>
<span class="styles__postcardCta___2n14_">
<a variant="secondary" data-module="Button" class="button__StyledButton-sc-10b15g-1 button__Button-sc-10b15g-3 jnvevu" href="/~starter-leaflet">View App
<svg viewBox="0 0 64 64" aria-hidden="true" class="icon__SVGBase-sc-14abeh1-1 bOzyky"><polygon points="64,32 48,48 48,36 0,36 0,28 48,28 48,16" transform="translate(32,32) rotate(0) translate(-32,-32)" fill="currentColor"></polygon></svg>
</a>
</span>
</div>
<div class="styles__postcardThumbnailColumn___2V9qg">
<img alt="" sizes="" src="https://pythonchannel.com/static/images/twitter_search_app/17.jpg" loading="auto" width="100%" height="100%">
</div>
</div>
</div>
</div>
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js" defer></script>
</body>
</html>
今コードを見る（CSS、196行）
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.styles__postcards___3GxG5 {
display: grid;
grid-gap: 30px;
grid-template-columns: 1fr 1fr 1fr;
}
.styles__postcard___32wNV {
position: relative;
border: 4px solid var(--outer-border-color);
border-radius: 5px;
background: var(--inner-border-color);
padding: 7px;
overflow: hidden;
}
.styles__waves___oO6bZ {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: url("https://cdn.glitch.com/179ed565-619c-4f66-b3a3-35011d202379%2Fwave.svg");
background-position: 0 -1px;
opacity: .65;
}
.styles__postcardContent___Afk_c {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
background: #fff;
border-radius: 5px;
padding: 20px 10px 15px 10px;
}
.styles__stamp___3XrcE {
position: absolute;
top: 8px;
right: 10px;
height: 35px;
}
.styles__stamp___3XrcE h2 {
margin: 0;
}
.heading__h2___7wo6b {
font-size: 18px;
font-weight: bold;
}
.styles__stamp___3XrcE .styles__stampLabel___vDert {
height: 35px;
}
.styles__stampIcon___2aurJ {
position: absolute;
top: 9px;
right: 9px;
font-size: 20px;
}
.cGovEN {
display: inline-block;
height: 1em;
width: auto;
vertical-align: top;
}
.styles__postcardColumns___1_OKh {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.styles__postcardColumns___1_OKh {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.styles__postcardContentColumn___2Ox5h, .styles__postcardThumbnailColumn___2V9qg {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.styles__postcardSubheading___T9R1u {
max-width: 110px;
}
.heading__h3___3zu_K {
font-size: 16px;
}
.text__p___3RiQJ {
font-family: "Benton Sans",Helvetica,Sans-serif;
font-size: var(--size);
font-weight: var(--weight);
line-height: 1.35;
margin: 0;
}
.text__defaultMargin___2lvr- {
margin: 1em 0;
}
.styles__postcardText___1OR8X {
color: #636363;
}
.styles__postcardCta___2n14_ {
margin-top: auto;
}
.jnvevu {
display: inline-block;
border-radius: var(--rounded);
font-family: var(--fonts-sans);
font-weight: 600;
line-height: 1;
position: relative;
white-space: nowrap;
padding: 0.375em 0.5em 0.1875em;
text-decoration: none;
color: var(--colors-secondary);
background-color: var(--colors-background);
border: 1px solid var(--colors-secondary);
font-size: var(--fontSizes-small);
}
.gRwhkR {
-moz-appearance: none;
color: inherit;
background-color: transparent;
border: 0px none;
border-radius: 0px;
padding: 0px;
margin: 0px;
font-family: inherit;
font-size: 100%;
line-height: 1.15;
text-transform: none;
text-align: left;
cursor: pointer;
}
.bOzyky {
display: inline-block;
height: 1em;
width: auto;
color: inherit;
vertical-align: top;
}
.styles__postcardThumbnailColumn___2V9qg {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
border-left: 0;
border-top: 1px solid #ddd;
padding: 0;
margin: 15px 0 0 0;
}
.styles__postcardThumbnailColumn___2V9qg img {
max-width: 110px;
max-height: 110px;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
}
.styles__postcardThumbnailColumn___2V9qg img {
width: 90%;
max-width: 130px;
height: auto;
max-height: 70%;
margin-top: 25px;
border-radius: 5px;
}
CSS のコンテンツの上にコンテンツを重ねて表現できる "relative" と "absolute" を 2回 使って、こうした ”重なり的” なレイアウトを実現できているわけですが、私自身、一回の "relative" と "absolute" はよく使いますが、 2回の "relative" と "absolute" を使う表現、見たこともありませんでしたし、そういうアイディアも思いつきませんでした。
この他にも自動で色が変わるレイアウトやローディングアイコン、ページ内の section を区切る際の ”斜め表現” など参考にしたいデザインはたくさんありますが、今回はこれぐらいで辞めておきます。
section を斜めに区切って表現する方法はいくつかありますが、 Glitch の CSS コードは斬新です。ご興味ある方は、参考にして見て下さい。
【今回作成した Glitch デザインのプロジェクトページ】
https://glitch.com/~zenith-responsible-sail
よければ Remix して CSS、 Glitch お楽しみ下さい。
JavaScript をフル活用している Glitch 、ここまでベタ褒めでしたが、デメリットもあります。
その一つは SEO。
これだけ Web にリッチなデザインを与えると、当然 JavaScript のボリュームも増えます。
適切に制御できればいいかも知れませんんが、 Glitch の場合、 Google Speed Insights は 48点ほど。
原点要因に 「JavaScript の適切な処理が必要」、が挙げられていました。
＼一流デザイナーのスキルが身に付く／
まとめ
Glitch 未体験の方は是非一度、 Webページにアクセスして "デザイン感" をお確かめください。 Webデザインのイメージが変わるかもしれませんが、これも一つの好例でしょう。またこうしたイケてるWebページには必ず JavaScript が登場してきます。先日ご紹介した「iPhone SE 2020 の商品紹介ページが凄すぎ」でも紹介したように CSS と JavaScript のハーモニーによって Webデザイン が仕上がっています。
「Webデザイナーって Photoshop や Illustrator に HTML、 CSS ぐらいでいいんじゃないの？」と思われている方も多いと思いますが、今後Webデザイナーとして幅広い分野で活躍していくには、JavaScriptの習得はマストです。
「そんなにたくさん学習するのは無理そう」「JavaScriptは苦手」という方は独学だからかもしれません。 CodeCampの無料体験で、自分のなかにあるWebデザインの世界を広げてみませんか？
- この記事を書いた人
- オシママサラ
