- 更新日: 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で制御」する場合の 2パターン。 画像で読み込んでしまえば簡単そうですが、「全体の見出しタグの角度を少し変えたい」「色を変えたい」といった時にもう一度画像を作り直す必要があります。しかし、 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 タグを 2重に使うことで表現。最初の 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デザインの世界を広げてみませんか?
- この記事を書いた人
- オシママサラ